1 Introduction to HTML 1 Introduction to HTML 1 Chapter 3.

งานนำเสนอเรื่อง: "1 Introduction to HTML 1 Introduction to HTML 1 Chapter 3."— ใบสำเนางานนำเสนอ:

1 1 Introduction to HTML 1 Introduction to HTML 1 Chapter 3

2 2 A Brief History of HTML

3 3 Who is making the Web standards?  The Web standards are not made up by Netscape or Microsoft.  The rule-making body of the Web is the W3C.  W3C stands for the World Wide Web Consortium.  W3C puts together specifications for Web standards.  The most essential Web standards are HTML, CSS and XML.  The latest HTML standard is XHTML 1.0.

4 4 What is an HTML File?  HTML stands for Hyper Text Markup Language  An HTML file is a text file containing small markup tags  The markup tags tell me Web browser how to display the page  An HTML file must have an htm or html file extension  An HTML file can be created using a simple text editor

5 5 HTML elements HTML documents are text files made up of HTML elements. HTML elements are defined using HTML tags.

6 6  HTML tags are used to mark-up HTML elements  HTML tags are surrounded by the two characters  The surrounding characters are called angle brackets  HTML tags normally come in pairs like and  The first tag in a pair is the start tag, the second tag is the end tag  The text between the start and end tags is the element content  HTML tags are not case sensitive, means the same as HTML Tags

7 7 The most important tag in HTML The most important tags in HTML are tags that define headings, paragraphs and line breaks. Headings This is a heading

8 8 Paragraphs This is a paragraph This is another paragraph Line Breaks This is a para graph with line breaks The most important tag in HTML

9 9 New Tags in HTML 4.0

10 10 The W3C document "Changes between HTML 3.2 and HTML 4.0" lists eight new tags in HTML 4.0. A brief description of these tags follows.... The... tag acts much the same as the tag, but applies to shorter quoted sections, ones that don't need paragraph breaks. New Tags in HTML 4.0

11 11... The... tag indicates an acronym in the text. is a "phrasal" tag, meaning that it helps define the structure of a text phrase. Make sure to use for the acronym itself, not the title that the letters stand for. behaves like,, and. New Tags in HTML 4.0

12 12... and... Use... to mark parts of a document that have been added since the document's last version...., similarly, marks document text that has been deleted since a previous version....... allows you finer control over the formatting of tables by specifying groups of columns that share width and alignment properties. New Tags in HTML 4.0

13 13 New Tags in HTML 4.0... With the... tag, you can group related form fields, making your form easier to read and use. Human brains like to be able to classify information, and helps do just that.... Use with to attach a label to the form grouping. HTML 4.0 requires both the start tag and the end tag for.

14 14 New Tags in HTML 4.0... Many aspects of are similar to those of elements of types submit and reset, but, in the words of the W3C, "allows richer presentational possibilities."

15 15 Deprecated Tags in HTML 4.0

16 16 Deprecated Tags in HTML 4.0... allowed a form to contain a simple string search. This action should be replaced by an form element.... The... tag enabled the running of a Java applet. This tag has been replaced by the more encompassing... tag.... The... tag, oddly enough, centered text or graphics. is deprecated in favor of tag with the align attribute set to "center."

17 17 Deprecated Tags in HTML 4.0...... allowed the specification of font sizes, colors, and faces. Style sheets, rather than HTML code, have taken over character formatting duties....... set a base font size that could then be referenced for size increases or decreases. Use style sheets instead to set and reference relative font sizes.... and... Both... and... created strikethrough characters. Replace these tags with style sheets.

18 18...... created underlined characters. As with the tags above, use style sheets to create underlines.... describes a directory list. While originally designed to output elements in horizontal columns like UNIX directory listings, browsers formatted lists like unordered lists. Deprecated Tags in HTML 4.0

19 19... The tag described single-column menu lists. As with lists, browsers made no distinction between and lists. Deprecated Tags in HTML 4.0

20 20 เริ่มต้นสร้างเว็บเพจ

21 21 ตั้งชื่อ Title ให้เว็บเพจ เว็บเพจหรือเว็บไซท์แต่ละแห่งเมื่อเปิดขึ้นมา จะพบว่าที่ Title bar ซึ่ง เป็นส่วนที่อยู่ด้านบนสุดของบราวเซอร์ ซึ่ง รูปแบบการใช้งานมีดังนี้ ชื่อแท็ก : TITLE รูปแบบ : ชื่อ Title

22 22 รูปแบบของพื้นหลัง การกำหนดรูปแบบพื้นหลังนั้น สามารถทำได้ 2 ลักษณะ ดังนี้ 1. การกำหนดสีให้พื้นหลัง ของเว็บเพจ การกำหนดสีให้พื้นหลังของเว็บเพจ สามารถทำได้โดยการใช้ Attribute คือ BGCOLOR ของ ซึ่งมีรูปแบบดังนี้ ชื่อ Attribute: BGCOLOR รูปแบบ :

23 23 การกำหนดพื้นหลังด้วยรูปภาพเป็นการใช้ Attribute ของ คือ BACKGROUND ซึ่งมีรูปแบบดังนี้ 2. การเปลี่ยนพื้นหลังจากสีพื้นให้เป็นรูปภาพ ชื่อ Attribute: BACKGROUND รูปแบบ : รูปแบบของพื้นหลัง

24 24 การสร้างลิงค์ การสร้างลิงค์เชื่อมโยงไปยังหน้าต่างๆ ใน เว็บไซท์ หรือ การสร้างลิงค์ไปยังเว็บไซต์อื่น นั้น จะใช้แท็ก ซึ่งมีรูปแบบดังนี้ ชื่อ Tag: A ชื่อ Attribute: HREF รูปแบบ : จุดลิงค์

25 25 การกำหนดสี การกำหนดสีให้ในเว็บเพจนั้นจะมีวิธีที่ใช้ กำหนดอยู่ 2 วิธีคือ  การกำหนดด้วยชื่อสี  การกำหนดด้วยค่าสี RGB

26 26 การแสดงข้อมูลในเว็บเพจ 1. แสดงข้อความบนหน้าเว็บเพจ รูปแบบในการแสดงข้อความบนหน้าเว็บ เพจ มีรูปแบบดังนี้ ชื่อแท็ก : …….. รูปแบบ : - ข้อความที่พิมพ์ลงไป 2. แสดงรูปภาพบนหน้าเว็บเพจ รูปแบบในการแสดงรูปภาพบนหน้าเว็บเพจ มีรูปแบบดังนี้ ชื่อแท็ก : IMG รูปแบบ :

27 27 เทคนิคการจัดตำแหน่งข้อมูล 1. จัดข้อมูลให้อยู่กึ่งกลางหน้า รูปแบบในการจัดข้อมูลให้อยู่กึ่งกลางหน้า มี รูปแบบดังนี้ ชื่อแท็ก : CENTER รูปแบบ : ข้อมูลที่ต้องการจัดตำแหน่ง 2. สั่งให้บราวเซอร์ตัดข้อมูลขึ้นบรรทัด ใหม่ รูปแบบในการจัดข้อมูลให้ขึ้นบรรทัดใหม่ มี รูปแบบดังนี้ ชื่อแท็ก : BR รูปแบบ : ข้อมูลที่ต้องการกำหนดให้ขึ้น บรรทัดใหม่

28 28 เทคนิคการจัดตำแหน่งข้อมูล 3. บังคับไม่ให้ตัดข้อมูลขึ้นบรรทัดใหม่ รูปแบบในการบังคับไม่ให้ตัดข้อมูลขึ้น บรรทัดใหม่ มีรูปแบบดังนี้ ชื่อแท็ก : NOBR รูปแบบ : ข้อมูลที่ไม่ต้องการให้ขึ้น บรรทัดใหม่ 4. แสดงข้อมูลเป็นพารากราฟ รูปแบบในการแสดงข้อมูลเป็นพารากราฟ มี รูปแบบดังนี้ ชื่อแท็ก : P รูปแบบ : ข้อมูลที่ต้องการจัดเป็นพารา กราฟ

29 29 เทคนิคการจัดตำแหน่งข้อมูล 5. จัดพารากราฟให้ชิดขอบด้านใดด้านหนึ่ง รูปแบบในการจัดพารากราฟให้ชิดขอบด้าน ใดด้านหนึ่ง มีรูปแบบดังนี้ ชื่อ Attribute: ALIGN รูปแบบ : ข้อมูลที่ต้องการจัดตำแหน่ง 6. คั่นแต่ละส่วนด้วยเส้นแนวนอน รูปแบบในการคั่นแต่ละส่วนด้วยเส้นแนวนอน มีรูปแบบดังนี้ ชื่อแท็ก : HR รูปแบบ : ข้อมูลที่ต้องการให้ปรากฏ หลังเส้นแนวนอน

30 30 เทคนิคการจัดตำแหน่งข้อมูล 7. ปรับความยาวของเส้นแนวนอน รูปแบบในการปรับความยาวของเส้นแนว นอน มีรูปแบบดังนี้ ชื่อ Attribute: WIDTH รูปแบบ : 8. ปรับขนาดของเส้นแนวนอน รูปแบบในการปรับขนาดของเส้นแนวนอน มี รูปแบบดังนี้ ชื่อ Attribute: SIZE รูปแบบ :

31 31 เทคนิคการจัดตำแหน่งข้อมูล 9. แสดงข้อมูลแบบ WYSIWYG การแสดงข้อมูลในลักษณะจะจัดข้อมูลใน ลักษณะเช่นเดียวกับที่ พิมพ์เข้าไปในโค้ด HTML ได้ ชื่อแท็ก : PRE รูปแบบ : ข้อมูลที่ต้องการจัด ตำแหน่ง