Presentation is loading. Please wait.

Presentation is loading. Please wait.

1 Introduction to HTML II กนกวรรธน์ เซี่ยงเจ็น สำนักวิชาเทคโนโลยีสารสนเทศ และการสื่อสาร มหาวิทยาลัยนเรศวร พะเยา.

Similar presentations


Presentation on theme: "1 Introduction to HTML II กนกวรรธน์ เซี่ยงเจ็น สำนักวิชาเทคโนโลยีสารสนเทศ และการสื่อสาร มหาวิทยาลัยนเรศวร พะเยา."— Presentation transcript:

1 1 Introduction to HTML II กนกวรรธน์ เซี่ยงเจ็น สำนักวิชาเทคโนโลยีสารสนเทศ และการสื่อสาร มหาวิทยาลัยนเรศวร พะเยา

2 2 Content  HTML Forms and Input  HTML Images  HTML Backgrounds  HTML Fonts  HTML Styles  HTML Head

3 3 Content  HTML Meta  HTML Uniform Resource Locators  HTML Scripts  HTML Web Server

4 4 HTML Forms and Input  A form is an area that can contain form elements.  Form elements are elements that allow the user to enter information (like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.) in a form.  A form is defined with the tag.


5 5 HTML Forms and Input Form Tags Tag Description Defines a form for user input Defines a form for user input Defines an input field Defines an input field Defines a text-area (a multi-line text input control) Defines a text-area (a multi-line text input control) Defines a selectable list (a drop-down box) Defines a selectable list (a drop-down box) Defines an option in the drop- down box Defines an option in the drop- down box Defines a push button Defines a push button Defines a caption for a fieldset Defines a caption for a fieldset Defines a fieldset Defines a fieldset

6 6 Input  The most used form tag is the tag. The type of input is specified with the type attribute.  The most commonly used input types are explained below.

7 7 Text Fields  Text fields are used when you want the user to type letters, numbers, etc. in a form. First name: First name:
Last name: Last name:

8 8 Text Password

Username: Username:
Password: Password:

Note that when you type characters in a password field, the browser displays asterisks or bullets instead of the characters.


9 9 Text Area The cat was playing in the garden.


10 10 Radio Buttons  Radio Buttons are used when you want the user to select one of a limited number of choices.

Male Male
Female Female

11 11 Radio Buttons  Radio Buttons are used when you want the user to select one of a limited number of choices.

Male Male
Female Female

12 12 Checkboxes  Checkboxes are used when you want the user to select one or more options of a limited number of choices.

I have a bike I have a bike
I have a car I have a car

13 13 Checkboxes  Checkboxes are used when you want the user to select one or more options of a limited number of choices.

I have a bike I have a bike
I have a car I have a car

14 14 Drop-Down Box

Volvo Volvo Saab Saab Fiat Fiat Audi Audi

15 15 Drop-Down Box

Volvo Volvo Saab Saab Fiat Fiat Audi Audi

16 16 List Box

Volvo Volvo Saab Saab Fiat Fiat Audi Audi

17 17 List Box

Volvo Volvo Saab Saab Fiat Fiat Audi Audi

18 18 Legend and FieldSet

Health information: Health information:
Height Height Weight Weight
If there is no border around the input form, your browser is too old. If there is no border around the input form, your browser is too old.

19 19 The Form's Action Attribute and the Submit Button  When the user clicks on the "Submit" button, the content of the form is sent to another file.  The form's action attribute defines the name of the file to send the content to.  The file defined in the action attribute usually does something with the received input.

20 20 The Form's Action Attribute and the Submit Button Username: Save: send.php

21 21 Action  action เป็นการกำหนดว่าจะส่งค่าจาก form ปัจจุบันไปให้กับ form อื่นๆ เพื่อทำ การประมวลผลต่อไป  action=“receive.php” ชื่อ receive.php คือชื่อเว็บ เพจที่เราต้องการส่งข้อมูลที่ได้รับการบันทึกจาก form ปัจจุบัน send.php receive.php action ฟอร์มปัจจุบัน ส่งข้อมูล ฟอร์มที่รับค่าจาก action

22 22 Method  method คือวิธีในการส่งค่าระหว่าง form ประกอบด้วย  GET  POST

23 23 Method:GET  method=“get” เป็นการส่งค่าไปยัง เว็บ เพจเป้าหมายที่กำหนดไว้ โดยจะแสดง รายละเอียดของข้อมูลที่ส่งไปผ่านทาง Address Bar ของ Web Browser

24 24 send_GET.php Username:

25 25 receive_GET.php

26 26 Method: POST  method=“post” เป็นการส่งค่าไปยัง เว็บเพจเป้าหมายที่กำหนดไว้ โดยจะ ไม่แสดงรายละเอียดของข้อมูล

27 27 send_POST.php Username:

28 28 receive_POST.php

29 29 HTML Images Tag Description Tag Description Defines an image Defines an image Defines an image map Defines an image map Defines an area inside an image map Defines an area inside an image map

30 30 The Image Tag and the Src Attribute An image:

31 31 The Image Tag and the Src Attribute An image from another folder: An image from

32 32 Alternate Text

Text-only browsers will only display the text in the "alt" attribute, which is "Go Left". Note that if you hold the mouse pointer over the image it will display the text.


33 33 Link by Image

You can also use an image as a link:


34 34 HTML Backgrounds  The tag has two attributes where you can specify backgrounds. The background can be a color or an image.

35 35 Backgrounds and bgcolor The bgcolor attribute sets the background to a color. The value of this attribute can be a hexadecimal number, an RGB value, or a color name.

36 36 Backgrounds and bgcolor  The background attribute sets the background to an image. The value of this attribute is the URL of the image you want to use. If the image is smaller than the browser window, the image will repeat itself until it fills the entire browser window.

37 37 Background Look: A background image! Look: A background image! Both gif and jpg files can be used as HTML backgrounds. Both gif and jpg files can be used as HTML backgrounds. If the image is smaller than the page, the image will repeat itself. If the image is smaller than the page, the image will repeat itself.

38 38 HTML Fonts Attributes Attribute Example Purpose size="number" size="2" Defines the font size size="+number" size="+1" Increases the font size size="-number" size="-1" Decreases the font size face="face-name" face= "Arial" Defines the font-name color="color-value" color="#eeff00" Defines the font color color="color-name" color="red" Defines the font color

This is a paragraph.

This is another paragraph.


40 40 HTML Styles Tag Description Defines a style definition Defines a style definition Defines a resource reference Defines a resource reference Defines a section in a document Defines a section in a document

41 41 HTML Styles  When a browser reads a style sheet, it will format the document according to it. There are three ways of inserting a style sheet:  External Style Sheet  Internal Style Sheet  Inline Styles

42 42 External Style Sheet  An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the tag. The tag goes inside the head section.

43 43 Internal Style Sheet  An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section with the tag. body {background-color: red} p {margin-left: 20px}

44 44 Inline Styles  An inline style should be used when a unique style is to be applied to a single occurrence of an element.  To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a paragraph: This is a paragraph


45 45 HTML Head  The head element contains general information, also called meta-information, about a document. Meta means "information about".  You can say that meta-data means information about data, or meta-information means information about information.

46 46 The elements inside the head element  The elements inside the head element should not be displayed by a browser.  According to the HTML standard, only a few tags are legal inside the head section. These are:,,,,, and.  Look at the following illegal construct: This is some text This is some text

47 47 HTML Meta  Some search engines on the WWW will use the name and content attributes of the meta tag to index your pages.  This meta element defines a description of your page:  This meta element defines keywords for your page:

48 48 HTML Uniform Resource Locators  Uniform Resource Locators  Something called a Uniform Resource Locator (URL) is used to address a document (or other data) on the World Wide Web. A full Web address like this: follows these syntax rules:  scheme://host.domain:port/path/filename

49 49 URL Schemes  Some examples of the most common schemes can be found below: Schemes Access file a file on your local PC ftp a file on an FTP server http a file on a World Wide Web Server gopher a file on a Gopher server news a Usenet newsgroup telnet a Telnet connection WAIS a file on a WAIS server

50 50 HTML Uniform Resource Locators  The scheme is defining the type of Internet service. The most common type is http.  The domain is defining the Internet domain name like mysite.com.  The host is defining the domain host. If omitted, the default host for http is www.  The :port is defining the port number at the host. The port number is normally omitted. The default port number for http is 80.

51 51 HTML Uniform Resource Locators  The path is defining a path (a sub directory) at the server. If the path is omitted, the resource (the document) must be located at the root directory of the Web site.  The filename is defining the name of a document. The default filename might be index.php, or index.html or something else depending on the settings of the Web server.

52 52 Accessing a Newsgroup  The following HTML code: Newsgroup Newsgroup

53 53 Downloading with FTP  The following HTML code: Download Game Download Game  (The link doesn't work. Don't try it. It is just an example. mysite doesn't really have an ftp directory.)

54 54 Link to your Mail system  The following HTML code:  creates a link to your own mail system like this:

55 55 HTML Scripts  A script in HTML is defined with the tag. Note that you will have to use the type attribute to specify the scripting language. document.write("Hello World!") document.write("Hello World!")

56 56 HTML Scripts Tag Description Defines a script Defines a script Defines an alternate text if the script is not executed Defines an alternate text if the script is not executed Defines an embedded object Defines an embedded object Defines run-time settings (parameters) for an object Defines run-time settings (parameters) for an object Deprecated. Use instead Deprecated. Use instead

57 57 HTML Scripts JavaScript: VBScript:

58 58

59 59

60 60 HTML Web Server  Personal Web Server (PWS)  Internet Information Server (IIS)  Apache (Linux)  Etc.


Download ppt "1 Introduction to HTML II กนกวรรธน์ เซี่ยงเจ็น สำนักวิชาเทคโนโลยีสารสนเทศ และการสื่อสาร มหาวิทยาลัยนเรศวร พะเยา."

Similar presentations


Ads by Google