การออกแบบเว็บไซต์ด้วยmicttc.rtarf.mi.th/ebookcenter/ebooktraining61/pdf_book/dreamweav… ·...

- 0 -

การออกแบบเวบไซตดวย Dreamweaver

ศนยฝกอบรมเทคโนโลยสารสนเทศและการสอสารทหาร กรมการสอสารทหาร

Master [Type the company name]

วชา

เอกสารประกอบการเรยนวชา


กองฝกอบรม

แผนกวชาเทคโนโลยสารสนเทศ กองฝกอบรม

กรมการสอสารทหาร กองบญชาการกองทพไทย

http:// http://comlec.rtarf.mi.th/

- 1 -



บทท ๑ เรยนรภาษา HTML และเครองมอทใชในการพฒนา

(Introduction HTML programming and development tools) 1.1 ความหมายและทมาของ HTML5

ภาพท 1-1 สญลกษณของภาษา HTML 5 (ทมา : w3school) HTML you can create your own Web site. This worldwide teaches you everything about HTML. HTML is easy to learn - You will enjoy it. A history of HTML

ภาพท 1-2 สญลกษณของประวตภาษา HTML 5 (ทมา : Addison Wesley Longman)

Included in this chapter is information on: - How the World Wide Web began - The events and circumstances that led to the World Wide Web's current popularity - How HTML has grown from its conception in the early 1990s

- 2 -



Summary HTML has had a life-span of roughly seven years. During that time, it has evolved from a simple language with a small number of tags to a complex system of mark-up, enabling authors to create all-singing-and-dancing Web pages complete with animated images, sound and all manner of gimmicks. This chapter tells you something about the Web's early days, HTML, and about the people, companies and organizations who contributed to HTML+, HTML 2, HTML 3.2 and finally, HTML 4 (HTML มอายการใชงานประมาณ 7 ป ในชวงเวลานนไดพฒนามาจากภาษางายๆทมTagจ านวนนอยไปจนถงระบบทซบซอนซงชวยใหผแตงสามารถสรางเวบเพจรองเพลงและเตนร าพรอมกบภาพเคลอนไหวเสยงและลกเลนตางๆได . บทนจะบอกคณเกยวกบวนแรกของเวบ HTML และเกยวกบบคคล บรษท และองคกรทสนบสนน HTML +, HTML 2, HTML 3.2 และสดทาย HTML 4) This chapter is a short history of HTML. Its aim is to give readers some idea of how the HTML we use today was developed from the prototype written by Tim Berners-Lee in 1992. The story is interesting - not least because HTML has been through an extremely bumpy ride on the road to standardization, with software engineers, academics and browser companies haggling about the language like so many Ministers of Parliament debating in the House of Commons. (บทนเปนประวตยอของ HTML วธการใช HTML ทเราใชกนในปจจบนไดรบการพฒนาขนจากตนแบบทเขยนขนโดย Tim Berners-Lee ในป 2535 เรองราวเปนเรองทนาสนใจไมนอยเพราะ HTML ไดรบการนงทเปนหลมเปนบออยางมากบนถนนสมาตรฐาน วศวกรซอฟตแวรนกวชาการและ บรษท เบราวเซอรมปากตอปากเกยวกบภาษาเชนรฐมนตรหลายแหงในสภาอภปรายสภา) 1989: Tim Berners-Lee invents the Web with HTML as its publishing language (Tim Berners-Lee ประดษฐเวบดวย HTML เปนภาษาส าหรบเผยแพร) The World Wide Web began life in the place where you would least expect it: at CERN, the European Laboratory for Particle Physics in Geneva, Switzerland. CERN is a meeting place for physicists from all over the world, where highly abstract and conceptual thinkers engage in the contemplation of complex atomic phenomena that occur on a minuscule scale in time and space. This is a surprising place indeed for the beginnings of a technology which would, eventually, deliver everything from tourist information, online shopping and advertisements, financial data, weather forecasts and much more to your personal computer.

- 3 -



World wide web เรมตนชวตในททคณคาดหวงอยางนอยทสด: ท CERN, หองปฏบตการฟสกสของอนภาคในยโรปในกรงเจนวา ประเทศสวตเซอรแลนด CERN เปนสถานทจดประชมส าหรบนกฟสกสจากทวโลก CERN เปนสถานทพบปะนกฟสกสจากทวโลกโดยทนกคดเชงนามธรรมและแนวความคดมสวนรวมในการพจารณาปรากฏการณอะตอมทซบซอนซงเกดขนในชวงเวลาทมขนาดเลกลงทงในเวลาและอวกาศ นเปนสถานททนาแปลกใจส าหรบจดเรมตนของเทคโนโลยซงในทสดจะสงมอบทกสงทกอยางจากขอมลการทองเทยว ชอปปงออนไลน และโฆษณาขอมลทางการเงนการคาดการณสภาพอากาศและอน ๆ อกมากมายไปยงคอมพวเตอรสวนบคคลของคณ Through 1990: The time was ripe for Tim's invention ผาน 1990: เวลาทสกส าหรบการประดษฐของทม The fact that the Web was invented in the early 1990s was no coincidence. Developments in communications technology during that time meant that, sooner or later, something like the Web was bound to happen. For a start, hypertext was coming into vogue and being used on computers. Also, Internet users were gaining in the number of users on the system: there was an increasing audience for distributed information. Last, but not least, the new domain name system had made it much easier to address a machine on the Internet. The domain name system By the middle 1980s, the Internet had a new, easy-to-use system for naming computers. This involved using the idea of the domain name. A domain name comprises a series of letters separated by dots, for example: `www.bo.com' or `www.erb.org.uk'. These names are the easy-to-use alternative to the much less manageable and cumbersome IP address numbers. A program called Distributed Name Service (DNS) maps domain names onto IP addresses, keeping the IP addresses `hidden'. DNS was an absolute breakthrough in making the Internet accessible to those who were not computer nerds. As a result of its introduction, email addresses became simpler. Previous to DNS, email addresses had all sorts of hideous codes such as exclamation marks, percent signs and other extraneous information to specify the route to the other machine. Tim bases his HTML on an existing internationally agreed upon method of text mark-up The HTML that Tim invented was strongly based on SGML (Standard Generalized Mark-up Language), an internationally agreed upon method for marking up text into structural units such as paragraphs, headings, list items and so on. SGML could be implemented on any machine. The idea was that the language was independent of the formatter (the browser or other viewing software) which actually displayed the text on the screen. The use of pairs of tags such as <TITLE> and </TITLE> is taken directly from SGML, which does exactly the same. The SGML elements used in Tim's HTML included P (paragraph); H1 through H6 (heading level 1 through

- 4 -



heading level 6); OL (ordered lists); UL (unordered lists); LI (list items) and various others. What SGML does not include, of course, are hypertext links: the idea of using the anchor element with the HREF attribute was purely Tim's invention, as was the now-famous www.name.name' format for addressing machines on the Web. Basing HTML on SGML was a brilliant idea: other people would have invented their own language from scratch but this might have been much less reliable, as well as less acceptable to the rest of the Internet community. Certainly the simplicity of HTML, and the use of the anchor element A for creating hypertext links, was what made Tim's invention so useful. January 1997: HTML 3.2 is ready Success! In January 1997, the W3 Consortium formally endorsed HTML 3.2 as an HTML cross-industry specification. HTML 3.2 had been reviewed by all member organizations, including major browser vendors such as Netscape and Microsoft. This meant that the specification was now stable and approved of by most Web players. By providing a neutral forum, the W3 Consortium had successfully obtained agreement upon a standard version of HTML. There was great rejoicing, indeed. HTML 3.2 took the existing IETF HTML 2 standard and incorporated features from HTML+ and HTML 3. HTML 3.2 included tables, applets, text flow around images, subscripts and superscripts. Spring 1998: Cougar has now fully materialized as HTML 4.0 and is a W3C Proposed Recommendation. But do the major browsers implement HTML 4.0, you wonder? As usual in the computer industry, there is no simple answer. Certainly things are heading in that direction. Neither Netscape's or Microsofts browser completely implements style sheets in the way specified, which is a pity, but no doubt they will make amends. There are a number of pecularities in the way that OBJECT works but we very much hope that this will also eventually be implemented in a more consistent manner.

© Addison Wesley Longman 1998. All rights reserved

http://www.w3.org/People/Raggett/book4/license.html

- 5 -



บทท 2 เรมตนเรยนร HTML

(Learning Basic HTML Language ) 2.1 What is HTML?

HTML stands for Hyper Text Markup Language HTML is the standard markup language for creating Web pages. HTML describes the structure of Web pages using markup HTML elements are the building blocks of HTML pages HTML elements are represented by tags HTML tags label pieces of content such as "heading", "paragraph", "table", and so on Browsers do not display the HTML tags, but use them to render the content of the page

2.2 HTML Editors Write HTML Using Notepad or TextEdit

Web pages can be created and modified by using professional HTML editors. However, for learning HTML we recommend a simple text editor like Notepad (PC) or

TextEdit (Mac). We believe using a simple text editor is a good way to learn HTML. Follow the four steps below to create your first web page with Notepad or TextEdit.

Step 1: Open Notepad (PC) Windows 8 or later: Open the Start Screen (the window symbol at the bottom left on your screen). Type

Notepad. Windows 7 or earlier: Open Start > Programs > Accessories > Notepad

Step 1: Open TextEdit (Mac) Open Finder > Applications > TextEdit

Also change some preferences to get the application to save files correctly. In Preferences > Format > choose "Plain Text"

Then under "Open and Save", check the box that says "Ignore rich text commands in HTML files".

Then open a new document to place the code.

- 6 -



Step 2: Write Some HTML Write or copy some HTML into Notepad.

<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>

อธบายตวอยาง Tag แรกในเอกสาร HTML คอ <html> Tag นบอก browser วานเปนการเรมตนเอกสาร HTML Tag สดทายในเอกสารคอ </html> Tagนบอก browser วานเปนการสนสดเอกสาร HTML ขอความระหวางแทก <head> และ Tag </head> เปนสารสนเทศสวนหว สารสนเทศนไมไดแสดงผลบน browser ขอความระหวางTag <title> เปนไตเตลของเอกสาร ไตเตลไดรบการแสดงในหวขอ (caption) ของ browser ขอความระหวางTag <body> เปนขอความทจะแสดงใน browser ขอความระหวางTag <b> กบ </b> จะไดรบการแสดงเปนฟอนตตวหนา นามสกล HTM หรอ HTML? เมอบนทกไฟล HTML สามารถใชไดทง .htm หรอ .html ตวอยางนใชเปน htm นอาจจะเปนนสยทไมดจากอดตทการใชซอฟแวรยอมใหเฉพาะนามสกล 3 ตวอกษร ดวยซอฟแวรใหมกวาจะปลอดภยอยางสมบรณในการใช .html

Step 3: Save the HTML Page Save the file on your computer. Select File > Save as in the Notepad menu. Name the file "index.htm" and set the encoding to UTF-8 (which is the preferred encoding

for HTML files).

ภาพท 2-2 การ save ไฟลภาษา HTML

ภาพท 2-1 เครองมอ notepad

- 7 -



Step 4: View the HTML Page in Your Browser Open the saved HTML file in your favorite browser (double click on the file, or right-click

- and choose "Open with"). The result will look much like this:

ภาพท 2-3 การแสดงผลบน Web browser

HTML 5 HTML5 - New Attribute Syntax (หลกไวยากรณรปแบบใหม) HTML5 allows four different syntaxes for attributes. (ความแตกตางทง 4 รปแบบของหลกไวยากรณส าหรบคณลกษณะ) This example demonstrates the different syntaxes used in an <input> tag: (ตวอยางแสดงถงความแตกตางของรปแบบไวยากรณทง 4 แบบ)

2.3 HTML Element An HTML element usually consists of a start tag and end tag, with the content inserted in between: <tagname>Content goes here...</tagname> The HTML element is everything from the start tag to the end tag: <p>My first paragraph.</p> (การใชงาน HTML Element ทกๆครงจะตองม tag เรมตน และ tag สนสด คนระหวางขอความทใสเขาไป <tagname>Content goes here...</tagname> HTML Element ทกๆ Element ทน ามาใชงานจะตองม tag เรมตน และ tag สนสด <p>My first paragraph.</p>)

Type Example

Empty <input type="text" value="John" disabled>

Unquoted <input type="text" value=John>

Double-quoted <input type="text" value="John Doe">

Single-quoted <input type="text" value='John Doe'>

- 8 -



HTML elements with no content are called empty elements. Empty elements do not have an end tag, such as the <br> element (which indicates a line break). Nested HTML Elements HTML elements can be nested (elements can contain elements). All HTML documents consist of nested HTML elements. This example contains four HTML elements: HTML element สามารถวางทบซอนกนได เอกสาร HTML ทงหมดลวนประกอบไปดวย HTML element ทวางทบซอนกน ตวอยาง การวางทบซอนของ element ทง 4 ประเภท <!DOCTYPE html> <html> <body> <h2>A Nested List</h2> <ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li> </ul> </body> </html> Example Explained

The <html> element defines the whole document. It has a start tag <html> and an end tag </html>.The element content is another HTML element (the <body> element).

(HTML element ระบถงเอกสารทงหมด โดยประกอบไปดวย tag เรมตน และ tag สนสด element เนอหา คอ element อกหลายประเภททมใน HTML element เชน <body> element)

The <body> element defines the document body. It has a start tag <body> and an end tag </body>. The element content is two other HTML elements (<h1> and <p>). องคประกอบ <body> ก าหนดเนอหาของเอกสาร ม tag เรมตน <body> และ tag สนสด </ body> เนอหาจะมองคประกอบทมอกสององคประกอบของ HTML element คอ (<h1> และ <p>) )

- 9 -



Do Not Forget the End Tag Some HTML elements will display correctly, even if you forget the end tag: HTML elements with no content are called empty elements. กรณาอยาลมใส Tag สนสด องคประกอบ HTML บางอยางจะแสดงอยางถกตองแมวาคณจะลม tag สนสด: องคประกอบ HTML ทไมมเนอหาเรยกวาองคประกอบทวางเปลา Empty HTML Elements <br> is an empty element without a closing tag (the <br> tag defines a line break). Empty elements can be "closed" in the opening tag like this: <br />. องคประกอบ HTML ทวางเปลา <br> เปนองคประกอบวางเปลาโดยไมม tag ปด (tag <br> ก าหนดตวแบงบรรทด) องคประกอบทวางเปลาสามารถ "ปด" ใน tag เปดดงน: <br /> Use Lowercase Tags HTML tags are not case sensitive: <P> means the same as <p>. การใชแทกตวพมพเลก Tag HTML ไมส าคญตอกรณ: <P> หมายถงเชนเดยวกบ <p> 2.3.1 HTML Headings HTML headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading. <h6> defines the least important heading: 2.3.1 หวเรอง HTML สวนหว HTML ถกก าหนดดวยแทก <h1> ถง <h6> <h1> ก าหนดสวนหวทส าคญทสด <h6> ก าหนดหวเรองทส าคญนอยทสด: <!DOCTYPE html> <html> <body><h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6> <h1 style="font-size:60px;">Heading 1</h1> </body> </html>

- 10 -



2.3.2 HTML Paragraphs HTML paragraphs are defined with the <p> tag: 2.3.2 ยอหนา HTML ยอหนา HTML ถกก าหนดดวยแทก <p>: <!DOCTYPE html> <html> <body> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html> 2.3.3 HTML Links HTML links are defined with the <a> tag: 2.3.3 ลงก HTML ลงก HTML ถกก าหนดดวยแทก <a>: <!DOCTYPE html> <html> <body> <a href="https://www.w3schools.com">This is a link</a> </body> </html> 2.3.4 HTML Images HTML images are defined with the <img> tag. The source file (src), alternative text (alt), width, and height are provided as attributes: 2.3.4 ภาพ HTML ภาพ HTML ถกก าหนดดวยแทก <img> ไฟลตนฉบบ (src) ขอความทางเลอก (alt) ความกวางและความสงจะก าหนดใหเปน attributes: <!DOCTYPE html> <html> <body> <img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142"> </body> </html>

- 11 -



2.4 HTML Attributes - All HTML elements can have attributes - Attributes provide additional information about an element - Attributes are always specified in the start tag - Attributes usually come in name/value pairs like: name="value" 2.4 HTML Attributes - องคประกอบ HTML ทงหมดสามารถม attribute ได - attribute ใหขอมลเพมเตมเกยวกบองคประกอบ - ระบ attribute ใน tag เรมตนเสมอ - Attribute มกจะน ามาใชคกน ชอ/คา เชน: name = "value" 2.4.1 The href Attribute HTML links are defined with the <a> tag. The link address is specified in the href attribute: <a href="https://www.w3schools.com">This is a link</a> 2.4.1 Attribute href links HTML ถกก าหนดดวย tag <a> มการระบทอย links ใน attribute href: <a href="https://www.w3schools.com"> นคอลงค </a> 2.4.2 The src Attribute HTML images are defined with the <img> tag. The filename of the image source is specified in the src attribute: <img src="img_girl.jpg"> 2.4.3 The width and height Attributes Images in HTML has a set of size attributes, which specifies the width and height of the image: <img src="img_girl.jpg" width="500" height="600"> 2.4.4 The alt Attribute The alt attribute specifies an alternative text to be used, when an image cannot be displayed.

The value of the attribute can be read by screen readers. This way, someone "listening" to the webpage, e.g. a blind person, can "hear" the element.

<img src="img_girl.jpg" alt="Girl with a jacket"> What happens if we try to display an image that does not exist: <img src="img_typo.jpg" alt="Girl with a jacket">

- 12 -



2.4.5 The style Attribute The style attribute is used to specify the styling of an element, like color, font, size etc. <p style="color:red">I am a paragraph</p> 2.4.6 The lang Attribute

The language of the document can be declared in the <html> tag. The language is declared with the lang attribute. Declaring a language is important for accessibility applications (screen readers) and

search engines: <!DOCTYPE html> <html lang="en-US"> <body> ... </body> </html> The first two letters specify the language (en). If there is a dialect, use two more letters (US)

- 13 -



แบบฝกหดทายบท 1.Change the size of the image to 250 pixels wide and 400 pixels tall. <!DOCTYPE html> <html> <body> <img src="w3schools.jpg" width="104" height="142"> </body> </html> 2.Transform the text below into a link that goes to "https://www.w3schools.com". <!DOCTYPE html> <html> <body> This is a link </body> </html> 3.Change the destination of the link below to "www.wwf.org.uk". <!DOCTYPE html> <html> <body> <a href="https://www.w3schools.com">This is a link</a> </body> </html> 4. The image below does not exist. Specify the alternate text "w3schools.com" for the image. <!DOCTYPE html> <html> <body> <img src="w3schooooools.jpg" width="135" height="50"> </body> </html>

- 14 -



2.5 The HTML Style Attribute

Setting the style of an HTML element, can be done with the style attribute. The HTML style attribute has the following syntax: <body style="background-color:powderblue;"> <p>This is a paragraph.</p> </body> 2.5.1 HTML Text Color The color property defines the text color for an HTML element: <h1 style="color:blue;">This is a heading</h1> <p style="color:red;">This is a paragraph.</p> 2.6 Styling HTML with CSS - CSS stands for Cascading Style Sheets. - CSS describes how HTML elements are to be displayed on screen, paper, or in other media. - CSS saves a lot of work. It can control the layout of multiple web pages all at once. - CSS can be added to HTML elements in 3 ways: Inline - by using the style attribute in HTML elements Internal - by using a <style> element in the <head> section External - by using an external CSS file 2.6.1 Internal CSS An internal CSS is used to define a style for a single HTML page. An internal CSS is defined in the <head> section of an HTML page, within a <style> element: <!DOCTYPE html> <html> <head> <style> body {background-color: powerblue;} h1 {color: blue;} p {color: red;} </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>

- 15 -



2.6.2 External CSS An external style sheet is used to define the style for many HTML pages. With an external style sheet, you can change the look of an entire web site, by changing one file! To use an external style sheet, add a link to it in the <head> section of the HTML page: <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> An external style sheet can be written in any text editor. The file must not contain any HTML code, and must be saved with a .css extension. Here is how the "styles.css" looks: body { background-color: powderblue; } h1 { color: blue; } p { color: red; } h1 { color: red; } 2.6.3 CSS Fonts The CSS color property defines the text color to be used. The CSS font-family property defines the font to be used. The CSS font-size property defines the text size to be used.

- 16 -



<!DOCTYPE html> <html> <head> <style> h1 { color: blue; font-family: verdana; font-size: 300%; } p { color: red; font-family: courier; font-size: 160%; } </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> 2.6.4 CSS Border

The CSS border property defines a border around an HTML element: p {

border: 1px solid powderblue; } 2.6.5 CSS Padding

The CSS padding property defines a padding (space) between the text and the border p { border: 1px solid powderblue; padding: 30px; }

- 17 -



2.6.6 CSS Margin The CSS margin property defines a margin (space) outside the border:

p { border: 1px solid powderblue; margin: 50px; }

ภาพท 2-4 ต าแหนง Padding Border Margin 2.6.7 The id Attribute

To define a specific style for one special element, add an id attribute to the element: <p id="p01">I am different</p> then define a style for the element with the specific id: <!DOCTYPE html> <html> <head> <style> #p01 { color: blue; } </style> </head> <body> <p>This is a paragraph.</p> <p>This is a paragraph.</p> <p id="p01">I am different.</p> </body> </html>

- 18 -



2.6.8 The class Attribute To define a style for a special type of elements, add a class attribute to the element:

<p class="error">I am different</p> then define a style for the elements with the specific class: Example

p.error { color: red; } <!DOCTYPE html> <html> <head> <style> p.error { color: red; } </style> </head> <body> <p>This is a paragraph.</p> <p>This is a paragraph.</p> <p class="error">I am different.</p> <p>This is a paragraph.</p> <p class="error">I am different too.</p> </body> </html> 2.6.9 External References

External style sheets can be referenced with a full URL or with a path relative to the current web page.

This example uses a full URL to link to a style sheet. <link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">

- 19 -



<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://www.w3schools.com/html/styles.css"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> 2.7 HTML Tables Defining an HTML Table

An HTML table is defined with the <table> tag. Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By default, table headings are bold and centered. A table data/cell is defined with the <td> tag.

<!DOCTYPE html> <html> <body> <table style="width:100%"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td>

- 20 -



<td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> </table> </body> </html>

Example Table <!DOCTYPE html> <html> <head> <style> table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; } tr:nth-child(even) { background-color: #dddddd; } </style> </head> <body>

- 21 -



<table> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Mexico</td> </tr> <tr> <td>Ernst Handel</td> <td>Roland Mendel</td> <td>Austria</td> </tr> <tr> <td>Island Trading</td> <td>Helen Bennett</td> <td>UK</td> </tr> <tr> <td>Laughing Bacchus Winecellars</td> <td>Yoshi Tannamuri</td> <td>Canada</td> </tr> <tr> <td>Magazzini Alimentari Riuniti</td>

- 22 -



<td>Giovanni Rovelli</td> <td>Italy</td> </tr> </table> </body> </html> Example <!DOCTYPE html> <html> <head> <style> table { width:100%; } table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; text-align: left; } table#t01 tr:nth-child(even) { background-color: #eee; } table#t01 tr:nth-child(odd) { background-color:#fff; } table#t01 th { background-color: black; color: white; }

- 23 -



</style> </head> <body> <table> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> </table> <br> <table id="t01"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr>

- 24 -



<td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> </table> </body> </html> 2.8 HTML Block and Inline Elements Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline. 2.8.1 Block-level Elements A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can). The <div> element is a block-level element. Example <div>Hello</div> <div>World</div> Block level elements in HTML: <address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt> <fieldset> <figcaption> <figure> <footer> <form> <h1>-<h6> <header> <hr> <li> <main> <nav> <noscript> <ol> <output> <p> <pre> <section> <table> <tfoot> <ul> <video>

- 25 -



2.8.2 Inline Elements An inline element does not start on a new line and only takes up as much width as necessary. This is an inline <span> element inside a paragraph. Example <span>Hello</span> <span>World</span> Inline elements in HTML: <a> <abbr> <acronym> <b> <bdo><big> <br><button> <cite> <code> <dfn> <em> <i> <img> <input> <kbd> <label> <map> <object> <q> <samp> <script> <select> <small> <span> <strong> <sub> <sup> <textarea> <time> <tt> <var> 2.8.3 The <div> Element The <div> element is often used as a container for other HTML elements. The <div> element has no required attributes, but both style and class are common. When used together with CSS, the <div> element can be used to style blocks of content: Example <div style="background-color:black;color:white;padding:20px;"> <h2>London</h2> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> </div> 2.8.4 The <span> Element The <span> element is often used as a container for some text. The <span> element has no required attributes, but both style and class are common. When used together with CSS, the <span> element can be used to style parts of the text: Example <h1>My <span style="color:red">Important</span> Heading</h1>

- 26 -



2.9 HTML Iframes An iframe is used to display a web page within a web page. 2.9.1 Iframe Syntax An HTML iframe is defined with the <iframe> tag: <iframe src="URL"></iframe> The src attribute specifies the URL (web address) of the inline frame page. 2.9.2 Iframe - Set Height and Width Use the height and width attributes to specify the size of the iframe. The attribute values are specified in pixels by default, but they can also be in percent (like "80%"). Example <iframe src="demo_iframe.htm" height="200" width="300"></iframe> 2.9.3 Iframe - Remove the Border By default, an iframe has a border around it. To remove the border, add the style attribute and use the CSS border property: Example <iframe src="demo_iframe.htm" style="border:none;"></iframe> With CSS, you can also change the size, style and color of the iframe's border: Example <iframe src="demo_iframe.htm" style="border:2px solid grey;"></iframe> 2.9.4 Iframe - Target for a Link An iframe can be used as the target frame for a link. The target attribute of the link must refer to the name attribute of the iframe: Example <iframe src="demo_iframe.htm" name="iframe_a"></iframe> <p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p> 2.10 HTML Javascript The HTML <script> Tag The <script> tag is used to define a client-side script (JavaScript). The <script> element either contains scripting statements, or it points to an external script file through the src attribute.

- 27 -



Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content. To select an HTML element, JavaScript very often use the document.getElementById(id) method. This JavaScript example writes "Hello JavaScript!" into an HTML element with id="demo": <!DOCTYPE html> <html> <head> </head> <body> <img id="target" src="http://www.java2s.com/style/download.png" width="107" height="98" /> <input type="button" onclick="nextPic()" value="change image" /> <script> var target = document.getElementById('target'); var counter = 0; var myPictures = [ "http://www.bildersuche.org/images/logos/pixabay-logo.png", "http://www.bildersuche.org/images/logos/123rf-logo.jpg", "http://www.java2s.com/style/download.png" ]; function nextPic() { counter += 1; if (counter > myPictures.length -1) { counter = 0; } target.src = myPictures[counter]; } </script> </body> </html>

- 28 -



บทท ๓ Bootstrap Framework

(กรอบการท างานแบบ bootstrap) 3.1 Bootstrap Grid System Bootstrap's grid system allows up to 12 columns across the page. If you do not want to use all 12 columns individually, you can group the columns together to create wider columns:

span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1

span 4 span 4 span 4

span 4 span 8

span 6 span 6

span 12

Bootstrap's grid system is responsive, and the columns will re-arrange automatically depending on the screen size.

- 29 -



3.2 Bootstrap Image Shapes Rounded Corners The .img-rounded class adds rounded corners to an image (IE8 does not support rounded corners):

<div class="container"> <h2>Rounded Corners</h2> <p>The .img-rounded class adds rounded corners to an image (not available in IE8):</p> <img src="cinqueterre.jpg" class="img-rounded" alt="Cinque Terre" width="304" height="236"> </div> Circle The .img-circle class shapes the image to a circle (IE8 does not support rounded corners):

<div class="container"> <h2>Circle</h2> <p>The .img-circle class shapes the image to a circle (not available in IE8):</p> <img src="cinqueterre.jpg" class="img-circle" alt="Cinque Terre" width="304" height="236"> </div>

- 30 -



Thumbnail The .img-thumbnail class shapes the image to a thumbnail:

<div class="container"> <h2>Thumbnail</h2> <p>The .img-thumbnail class creates a thumbnail of the image:</p> <img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre" width="304" height="236"> </div> Basic Dropdown A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list: Example Explained The .dropdown class indicates a dropdown menu.To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and the data-toggle="dropdown" attribute. The .caret class creates a caret arrow icon (), which indicates that the button is a dropdown. Add the .dropdown-menu class to a <ul> element to actually build the dropdown menu.

- 31 -



<div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> </ul> </div>

Basic Collapsible

Collapsibles are useful when you want to hide and show large amount of content: <div class="container"> <h2>Simple Collapsible</h2> <p>Click on the button to toggle between showing and hiding content.</p> <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button> <div id="demo" class="collapse"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> The .collapse class indicates a collapsible element (a <div> in our example); this is the content that will be shown or hidden with a click of a button.

To control (show/hide) the collapsible content, add the data-toggle="collapse" attribute to an <a> or a <button> element. Then add the data-target="#id" attribute to connect the button with the collapsible content (<div id="demo">).

Note: For <a> elements, you can use the href attribute instead of the data-target attribute:

- 32 -



3.3 Bootstrap Carousel Plugin The Carousel Plugin The Carousel plugin is a component for cycling through elements, like a carousel (slideshow). Tip: Plugins can be included individually (using Bootstrap's individual "carousel.js" file), or all at once (using "bootstrap.js" or "bootstrap.min.js"). <div class="container"> <h2>Carousel Example</h2> <div id="myCarousel" class="carousel slide" data-ride="carousel">  <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol>  <div class="carousel-inner"> <div class="item active"> <img src="la.jpg" alt="Los Angeles" style="width:100%;"> </div> <div class="item"> <img src="chicago.jpg" alt="Chicago" style="width:100%;"> </div> <div class="item"> <img src="ny.jpg" alt="New york" style="width:100%;"> </div> </div>

- 33 -



 <a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span> </a> </div> </div> Example Explained The outermost <div>: Carousels require the use of an id (in this case id="myCarousel") for carousel controls to function properly. The class="carousel" specifies that this <div> contains a carousel. The .slide class adds a CSS transition and animation effect, which makes the items slide when showing a new item. Omit this class if you do not want this effect. The data-ride="carousel" attribute tells Bootstrap to begin animating the carousel immediately when the page loads. The "Indicators" part: The indicators are the little dots at the bottom of each slide (which indicates how many slides there is in the carousel, and which slide the user are currently viewing). The indicators are specified in an ordered list with class .carousel-indicators. The data-target attribute points to the id of the carousel. The data-slide-to attribute specifies which slide to go to, when clicking on the specific dot. The "Wrapper for slides" part: The slides are specified in a <div> with class .carousel-inner. The content of each slide is defined in a <div> with class .item. This can be text or images. The .active class needs to be added to one of the slides. Otherwise, the carousel will not be visible.

- 34 -



The "Left and right controls" part: This code adds "left" and "right" buttons that allows the user to go back and forth between the slides manually. The data-slide attribute accepts the keywords "prev" or "next", which alters the slide position relative to its current position. Add Captions to Slides Add <div class="carousel-caption"> within each <div class="item"> to create a caption for each slide:  <div class="carousel-inner"> <div class="item active"> <img src="la.jpg" alt="Los Angeles" style="width:100%;"> <div class="carousel-caption"> <h3>Los Angeles</h3> <p>LA is always so much fun!</p> </div> </div> <div class="item"> <img src="chicago.jpg" alt="Chicago" style="width:100%;"> <div class="carousel-caption"> <h3>Chicago</h3> <p>Thank you, Chicago!</p> </div> </div> <div class="item"> <img src="ny.jpg" alt="New York" style="width:100%;"> <div class="carousel-caption"> <h3>New York</h3> <p>We love the Big Apple!</p> </div> </div> </div>

- 35 -



บทท ๔ การใช bootstrap ออกแบบเวบไซตแบบหนาเดยว

(Bootstrap for design single web) Single Page Website คอ เวบไซตทแสดงเนอหาเกยวกบสนคาหรอบรการรวมเอาไวในหนาเดยว โดยสามารถกดเลอนไปยงสวนตางๆ ของเวบไซตไดโดยทไมตองโหลดหนาใหม เหมาะสมกบเวบไซตทมขอมลไมมากนก เชน เวบไซตขายสนคาทมความหลากหลายนอย หรอ เวบไซตประชาสมพนธองคกร เปนตน เนองจากไมจ าเปนตองสรางหนาเวบไซต เพอรองรบสนคา เหมอนกบเวบไซตในลกษณะ e-Commerce นนเอง ในปจบนแบรนดระดบโลกทเรารจกกนด เชน Apple หรอ Uber กไดหนมาใชรปแบบเวบไซต Single Page กนมากขน เพราะนอกจากจะสรางความสะดวกสบายตอผเขาชมเวบไซตแลว ยงสวยงาม และงายตอการออกแบบอกดวยคะ วนน ReadyPlanet จงอยากพาทกทานมาท าความรจกกบ Single Page Website รวมถงการออกแบบเวบไซตในลกษณะนใหสวยงาม ตอบโจทยความตองการของผบรโภค Single Page Website ใหประสบการณทดเมอใชผานโมบายลไดมากกวา อยางททราบกนดวา ปจจบนผบรโภคหนมาใชสมารทโฟนในการเชอมตออนเทอรเนตเพอเขาถงขอมลขาวสารเกยวกบสนคาหรอบรการกนมากขน ท าใหแบรนดตางๆหนมาใหความส าคญกบ Responsive Web Design หรอ การออกแบบเวบไซตใหแสดงผลไดดทกหนาจอ ซงเมอวเคราะหจากความพงพอใจของผบรโภคบนโมบายลแลวพบวา พวกเขาชนชอบทจะอานขอมลบนเวบไซตจากการเลอนหนาจอลงไปเรอยๆ เพอเลอกอานเนอหาทสนใจไดทนท มากกวาการคลกหนาเวบไซตเพออานขอมลหลายๆหนา เพราะตองใช เวลากวาหนาเวบไซตจะแสดงผล เนอหาบนเวบไซต ไมจ าเปนตองมาก ใหความส าคญกบรปภาพมากกวา อกหนงขอดของการมเวบไซตรปแบบ Single Page Website คอ คณไมจ าเปนตองท าเวบไซตขนมาหลายๆหนา เพออธบายรายละเอยดเกยวกบแบรนด สนคา หรอบรการของคณเอาไวบนเวบไซต แลวยงตองสรางเมนคนหาเพอเชอมโยงขอมลเหลานนเขาดวยกน ในกรณทเวบไซตของคณมสนคาไมกประเภท หรอขอมลบนเวบไซตของคณมไมมากนก เพยงแคออกแบบเวบไซต 1 หนา แลวท าการแบงสวนของหนาเวบไซตนนๆ เพอใชอธบายสนคาหรอบรการแตละชนของคณ และสรางปมเอาไวใหผเขาชมคลกเขาไปอานรายละเอยดสนคาทสนใจไดบน Landing Page (หนาปลายทางทรองรบเมอผเขาชมคลกออกไปจากเวบไซต) ท าใหคณไมจ าเปนตองใสเนอหาลงไปในหนาเวบไซตมากนก มเพยงแคค าหลกทดงดดกลมเปาหมายใหคลก ควรใหความส าคญกบรปภาพสนคาทสวยสะดดตา และสรางหนาLanding Page ทมขอมลสนคาครบถวนแยกออกมาตางหาก เทานนกเพยงพอแลว

- 36 -



<!DOCTYPE html> <html lang="en"> <head>  <title>Bootstrap Theme Company Page</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css"> <script src="js/jquery-3.2.1.min.js"></script> <script src="js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="css/styles.css"> </head> <body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60"> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#myPage">Logo</a> </div>

- 37 -



<div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav navbar-right"> <li><a href="#about">ABOUT</a></li> <li><a href="#services">SERVICES</a></li> <li><a href="#portfolio">PORTFOLIO</a></li> <li><a href="#pricing">PRICING</a></li> <li><a href="#contact">CONTACT</a></li> </ul> </div> </div> </nav> <div class="jumbotron text-center"> <h1>Company</h1> <p>We specialize in blablabla</p> <form> <div class="input-group"> <input type="email" class="form-control" size="50" placeholder="Email Address" required> <div class="input-group-btn"> <button type="button" class="btn btn-danger">Subscribe</button> </div> </div> </form> </div>  <div id="about" class="container-fluid"> <div class="row"> <div class="col-sm-8"> <h2>About Company Page</h2><br> <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</h4><br>

- 38 -



<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <br><button class="btn btn-default btn-lg">Get in Touch</button> </div> <div class="col-sm-4"> <span class="glyphicon glyphicon-signal logo"></span> </div> </div> </div> <div class="container-fluid bg-grey"> <div class="row"> <div class="col-sm-4"> <span class="glyphicon glyphicon-globe logo slideanim"></span> </div> <div class="col-sm-8"> <h2>Our Values</h2><br> <h4><strong>MISSION:</strong> Our mission lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</h4><br> <p><strong>VISION:</strong> Our vision Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

- 39 -



</div> </div> </div>  <div id="services" class="container-fluid text-center"> <h2>SERVICES</h2> <h4>What we offer</h4> <br> <div class="row slideanim"> <div class="col-sm-4"> <span class="glyphicon glyphicon-off logo-small"></span> <h4>POWER</h4> <p>Lorem ipsum dolor sit amet..</p> </div> <div class="col-sm-4"> <span class="glyphicon glyphicon-heart logo-small"></span> <h4>LOVE</h4> <p>Lorem ipsum dolor sit amet..</p> </div> <div class="col-sm-4"> <span class="glyphicon glyphicon-lock logo-small"></span> <h4>JOB DONE</h4> <p>Lorem ipsum dolor sit amet..</p> </div> </div> <br><br> <div class="row slideanim"> <div class="col-sm-4"> <span class="glyphicon glyphicon-leaf logo-small"></span> <h4>GREEN</h4> <p>Lorem ipsum dolor sit amet..</p> </div>

- 40 -



<div class="col-sm-4"> <span class="glyphicon glyphicon-certificate logo-small"></span> <h4>CERTIFIED</h4> <p>Lorem ipsum dolor sit amet..</p> </div> <div class="col-sm-4"> <span class="glyphicon glyphicon-wrench logo-small"></span> <h4 style="color:#303030;">HARD WORK</h4> <p>Lorem ipsum dolor sit amet..</p> </div> </div> </div>  <div id="portfolio" class="container-fluid text-center bg-grey"> <h2>Portfolio</h2><br> <h4>What we have created</h4> <div class="row text-center slideanim"> <div class="col-sm-4"> <div class="thumbnail"> <img src="paris.jpg" alt="Paris" width="400" height="300"> <p><strong>Paris</strong></p> <p>Yes, we built Paris</p> </div> </div> <div class="col-sm-4"> <div class="thumbnail"> <img src="newyork.jpg" alt="New York" width="400" height="300"> <p><strong>New York</strong></p> <p>We built New York</p> </div> </div> <div class="col-sm-4">

- 41 -



<div class="thumbnail"> <img src="sanfran.jpg" alt="San Francisco" width="400" height="300"> <p><strong>San Francisco</strong></p> <p>Yes, San Fran is ours</p> </div> </div> </div><br> <h2>What our customers say</h2> <div id="myCarousel" class="carousel slide text-center" data-ride="carousel">  <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol>  <div class="carousel-inner" role="listbox"> <div class="item active"> <h4>"This company is the best. I am so happy with the result!"<br><span>Michael Roe, Vice President, Comment Box</span></h4> </div> <div class="item"> <h4>"One word... WOW!!"<br><span>John Doe, Salesman, Rep Inc</span></h4> </div> <div class="item"> <h4>"Could I... BE any more happy with this company?"<br><span>Chandler Bing, Actor, FriendsAlot</span></h4> </div> </div>

- 42 -



 <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div>  <div id="pricing" class="container-fluid"> <div class="text-center"> <h2>Pricing</h2> <h4>Choose a payment plan that works for you</h4> </div> <div class="row slideanim"> <div class="col-sm-4 col-xs-12"> <div class="panel panel-default text-center"> <div class="panel-heading"> <h1>Basic</h1> </div> <div class="panel-body"> <p><strong>20</strong> Lorem</p> <p><strong>15</strong> Ipsum</p> <p><strong>5</strong> Dolor</p> <p><strong>2</strong> Sit</p> <p><strong>Endless</strong> Amet</p> </div> <div class="panel-footer"> <h3>$19</h3>

- 43 -



<h4>per month</h4> <button class="btn btn-lg">Sign Up</button> </div> </div> </div> <div class="col-sm-4 col-xs-12"> <div class="panel panel-default text-center"> <div class="panel-heading"> <h1>Pro</h1> </div> <div class="panel-body"> <p><strong>50</strong> Lorem</p> <p><strong>25</strong> Ipsum</p> <p><strong>10</strong> Dolor</p> <p><strong>5</strong> Sit</p> <p><strong>Endless</strong> Amet</p> </div> <div class="panel-footer"> <h3>$29</h3> <h4>per month</h4> <button class="btn btn-lg">Sign Up</button> </div> </div> </div> <div class="col-sm-4 col-xs-12"> <div class="panel panel-default text-center"> <div class="panel-heading"> <h1>Premium</h1> </div> <div class="panel-body"> <p><strong>100</strong> Lorem</p> <p><strong>50</strong> Ipsum</p> <p><strong>25</strong> Dolor</p>

- 44 -



<p><strong>10</strong> Sit</p> <p><strong>Endless</strong> Amet</p> </div> <div class="panel-footer"> <h3>$49</h3> <h4>per month</h4> <button class="btn btn-lg">Sign Up</button> </div> </div> </div> </div> </div>  <div id="contact" class="container-fluid bg-grey"> <h2 class="text-center">CONTACT</h2> <div class="row"> <div class="col-sm-5"> <p>Contact us and we'll get back to you within 24 hours.</p> <p><span class="glyphicon glyphicon-map-marker"></span> Chicago, US</p> <p><span class="glyphicon glyphicon-phone"></span> +00 1515151515</p> <p><span class="glyphicon glyphicon-envelope"></span> [email protected]</p> </div> <div class="col-sm-7 slideanim"> <div class="row"> <div class="col-sm-6 form-group"> <input class="form-control" id="name" name="name" placeholder="Name" type="text" required> </div> <div class="col-sm-6 form-group"> <input class="form-control" id="email" name="email" placeholder="Email" type="email" required> </div>

- 45 -



</div> <textarea class="form-control" id="comments" name="comments" placeholder="Comment" rows="5"></textarea><br> <div class="row"> <div class="col-sm-12 form-group"> <button class="btn btn-default pull-right" type="submit">Send</button> </div> </div> </div> </div> </div>  <div id="googleMap" style="height:400px;width:100%;"> <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d15492.772618674613!2d100.568995!3d13.8873959!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x74ec4c4879ae3481!2z4LiB4Lit4LiH4Lia4Lix4LiN4LiK4Liy4LiB4Liy4Lij4LiB4Lit4LiH4LiX4Lix4Lie4LmE4LiX4Lii!5e0!3m2!1sth!2sth!4v1515997104017" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe> </div>  <footer class="container-fluid text-center"> <a href="#myPage" title="To Top"> <span class="glyphicon glyphicon-chevron-up"></span> </a> <p>Bootstrap Theme Made By <a href="https://www.w3schools.com" title="Visit w3schools">www.w3schools.com</a></p>

- 46 -



</footer> <script> $(document).ready(function(){ // Add smooth scrolling to all links in navbar + footer link $(".navbar a, footer a[href='#myPage']").on('click', function(event) { // Make sure this.hash has a value before overriding default behavior if (this.hash !== "") { // Prevent default anchor click behavior event.preventDefault(); // Store hash var hash = this.hash; // Using jQuery's animate() method to add smooth page scroll // The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area $('html, body').animate({ scrollTop: $(hash).offset().top }, 900, function(){ // Add hash (#) to URL when done scrolling (default click behavior) window.location.hash = hash; }); } // End if }); $(window).scroll(function() { $(".slideanim").each(function(){ var pos = $(this).offset().top; var winTop = $(window).scrollTop(); if (pos < winTop + 600) {

- 47 -



$(this).addClass("slide"); } }); }); }) </script> </body> </html>

การออกแบบเว็บไซต์ด้วยmicttc.rtarf.mi.th/ebookcenter/ebooktraining61/pdf_book/dreamweav… ·...

Documents

Transcript of การออกแบบเว็บไซต์ด้วยmicttc.rtarf.mi.th/ebookcenter/ebooktraining61/pdf_book/dreamweav… ·...