26
Lecture Note 2: About HTML
| Date post: | 25-Dec-2015 |
| Category: |
Documents |
| Upload: | virgil-woods |
| View: | 219 times |
| Download: | 0 times |
Lecture Note 2: About HTML
Getting StartedGetting Started
Firstly, HTML works by applying tags to text and page elements, so that the browser can understand how to render the page correctly. These tags appear thus: <HTML></HTML>
You'll also need to know the file referencing scheme used in HTML. You can either link to files relatively: ../index.html
The above means to go back one directory relative to the current document, and use the file index.html. /index.html
The above means to use the file, index.html in the root directory. or you can link to files absolutely: http://www.ncku.edu.tw/aspcourse/html/
The above uses the HTTP protocol to reference a URL on the World Wide Web. This method is most commonly used for external linking to other sites.
The BasicsThe Basics
– The basics cover the tags you need in order for the page "to exist". The basics cover the tags you need in order for the page "to exist". This doesn't include what goes in the page; it includes only what you This doesn't include what goes in the page; it includes only what you need in order for the browser to recognize that it truly is a Web page. need in order for the browser to recognize that it truly is a Web page.
– <HTML></HTML><HTML></HTML>This is the basic tag for every page. It tells the This is the basic tag for every page. It tells the browser that the file being loaded is a HTML document. Look at the browser that the file being loaded is a HTML document. Look at the basic layout of any Web page to see how it's used.basic layout of any Web page to see how it's used.
– <HEAD></HEAD><HEAD></HEAD>This defines the head of your page. Incorporates This defines the head of your page. Incorporates the <TITLE></TITLE> tag.the <TITLE></TITLE> tag.
– <BODY></BODY><BODY></BODY>This allows you to define the body arguments. This allows you to define the body arguments. They can include: They can include: BACKGROUND="file.gif"BACKGROUND="file.gif" sets an image file to be tiled as the backdrop sets an image file to be tiled as the backdrop to the page elements. to the page elements. BGCOLOR="#rgbcode"BGCOLOR="#rgbcode" Sets the background color. Sets the background color. TEXT="#rgbcode"TEXT="#rgbcode" - - sets the text color sets the text color LINK="#rgbcode"LINK="#rgbcode" - sets the link color - sets the link colorVLINK="#rgbcode"VLINK="#rgbcode" - sets the visited links color - sets the visited links colorTOPMARGIN=xTOPMARGIN=x - defines the top margin for the body - defines the top margin for the bodyLEFTMARGIN=xLEFTMARGIN=x - defines the left margin for the body - defines the left margin for the body
RIGHTMARGIN=xRIGHTMARGIN=x - defines the right margin for the body - defines the right margin for the body
<html><html> <head><head> } } 標題設定區標題設定區 </head></head> <body><body> } HTML } HTML 網頁本文區網頁本文區 </body></body>
</html></html>
– <TITLE></TITLE> <TITLE></TITLE> This allows you to display a title at the top of the This allows you to display a title at the top of the browser. (less than 20 words)browser. (less than 20 words)
– <META> <META> This allows the owner to display certain information to This allows the owner to display certain information to the browser without the page seeing it. Here are some the browser without the page seeing it. Here are some examples:examples:
<META NAME="description" CONTENT="This is my <META NAME="description" CONTENT="This is my page description.">page description.">Describes your page's contentsDescribes your page's contents
<META NAME="keywords" CONTENT="word1, word2, <META NAME="keywords" CONTENT="word1, word2, word3, word4 “>word3, word4 “>Enters keywords for your pageEnters keywords for your page
<META HTTP-EQUIV="refresh" CONTENT="10; <META HTTP-EQUIV="refresh" CONTENT="10; url=index2.html"> url=index2.html"> Reloads the page after 10 seconds to index2.htmlReloads the page after 10 seconds to index2.html
Text ControlText Control
<H1></H1>This allows you to change the size of letters or words. Includes H1 - H6, H1 being the biggest and H6 being the smallest.
<CENTER></CENTER>This allows you to display the text in the center of the page.
<Q></Q>This formats certain text as a quote.
<BIG></BIG>This makes the text bigger than the rest.
<SMALL></SMALL>This makes the text smaller than the rest.
<SUB></SUB>This allows you to make the text look like this.
<SUP></SUP>This gives a superscript effect to your text.
<ABBREV></ABBREV>This abbreviates certain text.
<html><html>
<head><head> <title><title> 歡迎光臨歡迎光臨 ASP Class</title>ASP Class</title> </head></head>
<body><body> <<<< 介紹 介紹 HTML>><br>HTML>><br> <big><big><big> lovely <big><big><big> lovely 俊安俊安 </big></big></big><br></big></big></big><br> <small><small>from Alice</small></small><small><small>from Alice</small></small> <h3 align="center">Class 2003 NCKU <h3 align="center">Class 2003 NCKU
SNME  SNME   推薦推薦 </h3></h3> <h1 align="center">Teacher Prof. Joe Yang</h1><h1 align="center">Teacher Prof. Joe Yang</h1>
</body></body> </html></html>
Text ControlText Control
<FONT></FONT>This allows you to control different aspects of the text. Includes: SIZE=x (x = +1 to +5 or -1 to -5) COLOR=#rgbcode defines the color, FACE="name" defines the font face
<B></B>This makes a word or group of words bold.
<STRONG></STRONG>This is the same as bold.
<I></I>This italicizes a word or group of words.
<EM></EM>This is the same as italics.
<U></U>This underlines a word or group of words.
<TT></TT>This makes a fixed width font.
<BLOCKQUOTE></BLOCKQUOTE>This indents the left and right-hand sides of the text.
<html><html>
<head><head> <title><title> 歡迎光臨歡迎光臨 ASP Class</title>ASP Class</title> </head></head>
<body><body> <font size=“5” color=“green” face=“<font size=“5” color=“green” face=“ 標楷體標楷體”” >> 綠色 綠色 size=5 size=5 的標楷體字體的標楷體字體
</font></font> <b><b> 標籤標籤 ~~ 粗體文字粗體文字 </b><br></b><br> <u><u> 標籤標籤 ~~ 加底線文字加底線文字 </u><br></u><br> <i><i> 標籤標籤 ~~ 斜體文字斜體文字 </i><br></i><br> SupSup 標籤標籤 ~~ 數學公式數學公式 2X<sup>2</sup>+4X<sup>5</sup>=50<br>2X<sup>2</sup>+4X<sup>5</sup>=50<br> SubSub 標籤標籤 ~~ 化學公式化學公式 2H<sub>2</sub>+1/2O<sub>2</sub>=H<sub>2</sub>O2H<sub>2</sub>+1/2O<sub>2</sub>=H<sub>2</sub>O <h1 align="center">Teacher Prof. Joe Yang</h1><h1 align="center">Teacher Prof. Joe Yang</h1>
</body></body> </html></html>
Text ControlText Control
<CITE></CITE>
This is another italics tag.
<CODE></CODE>
This is another fixed width font tag.
<DFN></DFN>
This allows you to embolden or italicize a word or group of words.
<PRE></PRE>
This allows the text to appear in the browser in the same format (layout) as it does in a text editor, such as Notepad, for example.
<LISTING> </LISTING>
This is a small fixed-width font tag - somewhat similar to<PRE></PRE> that spaces everything out.
<html><html>
<head><head> <title><title> 歡迎光臨歡迎光臨 ASP Class</title>ASP Class</title> </head></head> <body><body> Hello ASP Class Student <br>Hello ASP Class Student <br> This is a test text for the ASP class 2006This is a test text for the ASP class 2006 Best regards,Best regards,
Joe YangJoe Yang
</body></body> </html></html>
<html><html>
<head><head> <title><title> 歡迎光臨歡迎光臨 ASP Class</title>ASP Class</title> </head></head> <body><body> <pre><pre> Hello ASP Class Student <br>Hello ASP Class Student <br> This is a test text for the ASP class 2006This is a test text for the ASP class 2006 Best regards,Best regards,
Joe YangJoe Yang
</pre></pre> </body></body> </html></html>
ListsLists
<DL></DL>
This defines the list items within a descriptive list.
<DT> </DT>
This defines the topic of the descriptive list.
<DD></DD>
This defines the indented item to be displayed in the descriptive list.
<OL></OL>
This is a way to group items into a numbered list. It uses the <li></li> tags to list the items.
<LI></LI>
This defines the list items with a number or a dot. Includes the following:
START="x"
TYPE="A/a/I/i" for upper or lower case and Roman numerals.
<UL></UL>
This is another way to list items. Also uses the <li></li> tags to define the list items with a bullet instead of a number. Includes the following options:
TYPE="disc/circle/square"
<html><html>
<head><head> <title><title> 歡迎光臨歡迎光臨 ASP Class</title>ASP Class</title> </head></head> <body><body> <dl><dl> <dt>Hello ASP Class Student </dt><dt>Hello ASP Class Student </dt> <dd>This is a test text for the ASP class 2006</dd><dd>This is a test text for the ASP class 2006</dd> <dt>Hello Again</dt><dt>Hello Again</dt> <dd>test</dd><dd>test</dd> </dl></dl>
</body></body> </html></html>
<html><html>
<head><head> <title><title> 歡迎光臨歡迎光臨 ASP Class</title>ASP Class</title> </head></head> <body><body> <center><font size=“5” color=“blue”> OK books</font></center><br><center><font size=“5” color=“blue”> OK books</font></center><br> Office booksOffice books <ol start=“4”><ol start=“4”> <li>Office 2000 books 4. Office 2000 books<li>Office 2000 books 4. Office 2000 books <li>Word 2000 books 5. Word 2000 books<li>Word 2000 books 5. Word 2000 books <li>FrontPage 2000 books 6. FrontPage 2000 books<li>FrontPage 2000 books 6. FrontPage 2000 books </ol></ol> Internet booksInternet books <ol><ol> <li type=“i”>Internet IE5.0 i. Internet IE5.0<li type=“i”>Internet IE5.0 i. Internet IE5.0 <li type=“i”>Internet IE4.0 ii. Internet IE4.0<li type=“i”>Internet IE4.0 ii. Internet IE4.0 </ol></ol> </body></body> </html></html> >>
Page Breaks and LinesPage Breaks and Lines
<HR>
This allows you to divide a page with a line. Includes the following options:
WIDTH=x (x = pixels/percentage)
ALIGN=x (x = left/right/center)
SIZE=xM
NOSHADE takes away the shading.
<BR>This allows the text to break without a full paragraph. The options are:
CLEAR="x" (x = left/right/all)
<NOBR></NOBR>
This allows the text to continue indefinitely without breaking.
Tables, Frames, and FormsTables, Frames, and Forms
<TABLE></TABLE>
These allow you to insert tables. It has the following options:
· WIDTH="x"
· HEIGHT="x"
· BORDER="x"
· CELLPADDING="x"
· CELLSPACING="x"
It also includes the following tags with their associated options:
· <TR></TR>
· <TD></TD>
· <TH></TH>
· ALIGN=left/middle/right
· VALIGN=top/middle/bottom
· COLOR=#rgbcode
· COLSPAN="x"
· ROWSPAN="x"
Tables, Frames, and FormsTables, Frames, and Forms
<FRAMESET></FRAMESET> This allows you to set up frames on your page. Includes the
following: · ROWS="x" (x = pixels/percentage) · COLS="x" (x = pixels/percentage) · FRAMEBORDER="x" · FRAMEWIDTH="x" · MARGINHEIGHT="x" · MARGINWIDTH="x"
Requires the frame tag to establish content. These include: · MARGINHEIGHT="x" · MARGINWIDTH="x" · NAME="name" · NORESIZE · SRC="file.html/file.gif/file.jpg" · SCROLLING="x" (x = yes/no/auto)
Don't forget the <NOFRAMES> tag for those browsers who can't
handle frames.
Tables, Frames, and FormsTables, Frames, and Forms
<FRAME>
This establishes content. Its attributes include:
· MARGINHEIGHT="x"
· MARGINWIDTH="x"
· NAME="name"
· NORESIZE
· SRC="x"
· SCROLLING="x" ( x = yes/no/auto)
Tables, Frames, and FormsTables, Frames, and Forms
<FORM></FORM>
This allows you to insert forms in your page. It includes the following
options:
· METHOD="POST/GET"
· ACTION="file/script"
You can also add checkboxes, text boxes and more. For example:
<INPUT TYPE="text/hidden/checkbox/radio/submit/reset“
SIZE="n" MAXLENGTH="x" NAME="name" VALUE="presettext">
<SELECT NAME="name" SIZE="x">
<OPTION VALUE="value1">Value1</OPTION>
<TEXTAREA NAME="name" ROWS="x" COLS="x“
VALUE="preset text" WRAP="virtual"></TEXTAREA>
Images and LinksImages and Links<A></A> This allows you to make certain text or picture a link to another page or
graphic not on the page. It can include the following options: · TARGET="framename" · HREF="path/to/a/file" - reference to the linked file · NAME="name" - sets a marker within a document so that a specific section
of a page may be linked to via "#sectionnamehere" with the HREF attribute <IMG>This allows you to insert an image into your Web page. It has the followingoptions: · SRC="file.gif"/src="file.jpg" · HEIGHT="x" · WIDTH="x," · LOWSRC="file.gif" - allows a low resolution image to be displayed while a
higher resolution image loads · ALT="text for older browsers" · USEMAP=#mapname · ISMAP · ALIGN="x" - sets the image alignment on the page (x = left/right/middle
/bottom/top/absmiddle/textop/absbottom) · BORDER="x“<MAP></MAP>This defines the areas and coordinates of an image map.
Java Applets, JavaScript, and Java Applets, JavaScript, and Miscellaneous TagsMiscellaneous Tags
<APPLET></APPLET>This allows you to insert a Java applet directly into your page. It includes: · CODE="java.class" · CODEBASE="/dir/to/applet" · HEIGHT="x" · WIDTH="x" <SCRIPT></SCRIPT>Javascript allows a script to run within the page. This tag usuallyappears in the <HEAD></HEAD> part of the document, but can alsoappear within the <BODY></BODY> tag. <!-- text --> Allows text to appear invisible on the page. This is used if you wouldlike to write comments on the page but not have them load in thebrowser. For example: <!-- This section is for beginners -->
The Response Object The Response Object
The Write method of the ASP Response Object is used to send content to the browser. For example, the following statement sends the text "Hello World" to the browser:
<% <% response.write("Hello World!") response.write("Hello World!") %> %>
VBScriptVBScript
You may use different scripting languages in ASP files. However, the default scripting language is VBScript:
<html><html><body><body><%<%response.write("Hello World!")response.write("Hello World!")%>%></body></body></html></html>
The example above writes "Hello World!" into the body of the The example above writes "Hello World!" into the body of the document.document.
JavaScript JavaScript
To set JavaScript as the default scripting language for a particular page you must insert a language specification at the top of the page:
<%@ language="javascript"%><%@ language="javascript"%><html><html><body><body><%Response.Write("Hello World!")%><%Response.Write("Hello World!")%></body></body></html></html>
Note: Unlike VBScript - JavaScript is case sensitive. You will have Note: Unlike VBScript - JavaScript is case sensitive. You will have to write your ASP code with uppercase letters and lowercase to write your ASP code with uppercase letters and lowercase letters when the language requires it. letters when the language requires it.
Other Scripting Languages Other Scripting Languages
ASP is shipped with VBScript and JScript (Microsoft's implementation of JavaScript). If you want to script in another language, like PERL, REXX, or Python, you will have to install script engines for them.
![Skaffold - storage.googleapis.com · [getting-started getting-started] Hello world! [getting-started getting-started] Hello world! [getting-started getting-started] Hello world! 5.](https://static.documents.pub/doc/80x56/5ec939f2a76a033f091c5ac7/skaffold-getting-started-getting-started-hello-world-getting-started-getting-started.jpg)
