The document discusses information technology and its applications. It introduces HTML (Hypertext Markup Language), which is the main markup language used to display web pages and other information in web browsers. HTML uses tags enclosed in angle brackets to structure and layout content. It describes how HTML pages are interpreted and displayed by web browsers. The document also provides a hands-on example of basic HTML tags for headings, paragraphs, and bold text.

1. Information Technology
And Its Applications
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

2. Remember
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

3. Remember
world wide
file
web
transfer
Internet
communication
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

4. Remember
world wide
file
web
transfer
Internet
communication
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

5. Remember
world wide
file
web
transfer
Internet
communication
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

6. Remember
world wide
file
web
transfer
Internet
communication
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

7. Remember
world wide
file
web
transfer
Internet
communication
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

8. Remember
world wide
file
web
transfer
Internet
communication
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

9. Remember
world wide
file
web
transfer
Internet
communication
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

10. Confusing? No!
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

11. Confusing? No!
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

12. Confusing? No!
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

13. Confusing? No!
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

14. Confusing? No!
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

15. Confusing? No!
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

16. Confusing? No!
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

17. Confusing? No!
SQL
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

18. Confusing? No!
SQL
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

19. Confusing? No!
SQL
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

20. Confusing? No!
SQL
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

21. Confusing? No!
SQL
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

22. Intro to HTML
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

23. Intro to HTML
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

24. Intro to HTML
HyperText Markup Language (HTML) is the main markup language for
displaying web pages and other information that can be displayed in a web
browser.
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

25. Intro to HTML
HyperText Markup Language (HTML) is the main markup language for
displaying web pages and other information that can be displayed in a web
browser.
HTML is written in the form of HTML elements consisting of tags enclosed in
angle brackets (like <html>), within the web page content. HTML tags most
commonly come in pairs like <h1> and </h1>, although some tags, known as
empty elements, are unpaired, for example <img>. In between these tags web
designers can add text, tags, comments and other types of text-based content.
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

26. Intro to HTML
HyperText Markup Language (HTML) is the main markup language for
displaying web pages and other information that can be displayed in a web
browser.
HTML is written in the form of HTML elements consisting of tags enclosed in
angle brackets (like <html>), within the web page content. HTML tags most
commonly come in pairs like <h1> and </h1>, although some tags, known as
empty elements, are unpaired, for example <img>. In between these tags web
designers can add text, tags, comments and other types of text-based content.
HTML is developed by the world wide web consortium. The latest
development, HTML 5, was introduced in 2010.
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

27. Intro to HTML
HyperText Markup Language (HTML) is the main markup language for
displaying web pages and other information that can be displayed in a web
browser.
HTML is written in the form of HTML elements consisting of tags enclosed in
angle brackets (like <html>), within the web page content. HTML tags most
commonly come in pairs like <h1> and </h1>, although some tags, known as
empty elements, are unpaired, for example <img>. In between these tags web
designers can add text, tags, comments and other types of text-based content.
HTML is developed by the world wide web consortium. The latest
development, HTML 5, was introduced in 2010.
In order to display HTML correctly you need a web browser which reads the
documents and composes them into visible or audible web pages. The
browser does not display the HTML tags, but uses the tags to interpret the
content of the page.
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

28. Intro to HTML
HyperText Markup Language (HTML) is the main markup language for
displaying web pages and other information that can be displayed in a web
browser.
HTML is written in the form of HTML elements consisting of tags enclosed in
angle brackets (like <html>), within the web page content. HTML tags most
commonly come in pairs like <h1> and </h1>, although some tags, known as
empty elements, are unpaired, for example <img>. In between these tags web
designers can add text, tags, comments and other types of text-based content.
HTML is developed by the world wide web consortium. The latest
development, HTML 5, was introduced in 2010.
In order to display HTML correctly you need a web browser which reads the
documents and composes them into visible or audible web pages. The
browser does not display the HTML tags, but uses the tags to interpret the
content of the page.
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

29. Hands on HTML
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

30. Hands on HTML
<h1>This is how you mark a headline</h1>
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

31. Hands on HTML
<h1>This is how you mark a headline</h1>
<h2>a sub-headline would look like this</h2>
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

32. Hands on HTML
<h1>This is how you mark a headline</h1>
<h2>a sub-headline would look like this</h2>
<p>Paragraphs would look like this<p>
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

33. Hands on HTML
<h1>This is how you mark a headline</h1>
<h2>a sub-headline would look like this</h2>
<p>Paragraphs would look like this<p>
<p>A second <b>one</b> like this.</p>
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

34. Hands on HTML
<h1>This is how you mark a headline</h1>
<h2>a sub-headline would look like this</h2>
<p>Paragraphs would look like this<p>
<p>A second <b>one</b> like this.</p>
You can also <a href=”http://sayfun.me”> link </a> to other websites.
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

35. Hands on HTML
<h1>This is how you mark a headline</h1>
<h2>a sub-headline would look like this</h2>
<p>Paragraphs would look like this<p>
<p>A second <b>one</b> like this.</p>
You can also <a href=”http://sayfun.me”> link </a> to other websites.
Or insert images <img src=”https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-
ash4/429495_327220157324593_1774362222_n.jpg” width=”300”
height=”500” />
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

36. Hands on HTML
<h1>This is how you mark a headline</h1>
<h2>a sub-headline would look like this</h2>
<p>Paragraphs would look like this<p>
<p>A second <b>one</b> like this.</p>
You can also <a href=”http://sayfun.me”> link </a> to other websites.
Or insert images <img src=”https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-
ash4/429495_327220157324593_1774362222_n.jpg” width=”300”
height=”500” />
One of the most important tags is the <div> </div> tag. It allows you to move
everything in between around your website
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

37. Hands on HTML
<h1>This is how you mark a headline</h1>
<h2>a sub-headline would look like this</h2>
<p>Paragraphs would look like this<p>
<p>A second <b>one</b> like this.</p>
You can also <a href=”http://sayfun.me”> link </a> to other websites.
Or insert images <img src=”https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-
ash4/429495_327220157324593_1774362222_n.jpg” width=”300”
height=”500” />
One of the most important tags is the <div> </div> tag. It allows you to move
everything in between around your website
<div align=”left”> <div align=”center”> <div align=”right”>
Left aligned </div> Centered Text</div> right aligned </div>
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

38. Hands on HTML
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

39. Hands on HTML
Now you....create a website in html with headlines, paragraphs, links, images...
When you are ready: Save file as NAME.html upload sayfun.me via ftp.
Find a html-tag on your own and use it in your website.
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

40. Intro to CSS
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

41. Intro to CSS
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

42. Intro to CSS
Cascading Style Sheets (CSS) is a style sheet language used for describing
the presentation semantics (the look and formatting) of a document written in
a markup language. Its most common application is to style web pages written
in HTML
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

43. Intro to CSS
Cascading Style Sheets (CSS) is a style sheet language used for describing
the presentation semantics (the look and formatting) of a document written in
a markup language. Its most common application is to style web pages written
in HTML
CSS is designed primarily to enable the separation of document content
(written in HTML or a similar markup language) from document presentation,
including elements such as the layout, colors, and fonts. This separation can
improve content accessibility, provide more flexibility and control in the
specification of presentation characteristics, enable multiple pages to share
formatting, and reduce complexity and repetition in the structural content (such
as by allowing for tableless web design).
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

44. Intro to CSS
Cascading Style Sheets (CSS) is a style sheet language used for describing
the presentation semantics (the look and formatting) of a document written in
a markup language. Its most common application is to style web pages written
in HTML
CSS is designed primarily to enable the separation of document content
(written in HTML or a similar markup language) from document presentation,
including elements such as the layout, colors, and fonts. This separation can
improve content accessibility, provide more flexibility and control in the
specification of presentation characteristics, enable multiple pages to share
formatting, and reduce complexity and repetition in the structural content (such
as by allowing for tableless web design).
The CSS specifications are maintained by the World Wide Web Consortium
(W3C).
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

45. Intro to CSS
Cascading Style Sheets (CSS) is a style sheet language used for describing
the presentation semantics (the look and formatting) of a document written in
a markup language. Its most common application is to style web pages written
in HTML
CSS is designed primarily to enable the separation of document content
(written in HTML or a similar markup language) from document presentation,
including elements such as the layout, colors, and fonts. This separation can
improve content accessibility, provide more flexibility and control in the
specification of presentation characteristics, enable multiple pages to share
formatting, and reduce complexity and repetition in the structural content (such
as by allowing for tableless web design).
The CSS specifications are maintained by the World Wide Web Consortium
(W3C).
<link rel="stylesheet" href="http://example.com/css/style.css"
type="text/css" />
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

46. Intro to CSS
Cascading Style Sheets (CSS) is a style sheet language used for describing
the presentation semantics (the look and formatting) of a document written in
a markup language. Its most common application is to style web pages written
in HTML
CSS is designed primarily to enable the separation of document content
(written in HTML or a similar markup language) from document presentation,
including elements such as the layout, colors, and fonts. This separation can
improve content accessibility, provide more flexibility and control in the
specification of presentation characteristics, enable multiple pages to share
formatting, and reduce complexity and repetition in the structural content (such
as by allowing for tableless web design).
The CSS specifications are maintained by the World Wide Web Consortium
(W3C).
<link rel="stylesheet" href="http://example.com/css/style.css"
type="text/css" />
that’s how you insert a css file in your html website
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

47. Hands on CSS
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

48. Hands on CSS
body
{
background-color:#d0e4fe;
background-image:url('NAME.png');}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

49. Hands on CSS
body
{
background-color:#d0e4fe;
main part of website
background-image:url('NAME.png');}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

50. Hands on CSS
body
{
background-color:#d0e4fe;
main part of website
background-image:url('NAME.png');}
h1
{
color:orange; headlines
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

51. Hands on CSS
body
{
background-color:#d0e4fe;
main part of website
background-image:url('NAME.png');}
h1
{
color:orange; headlines
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
paragraphs
}
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

52. CMS
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

53. CMS
Website
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

54. CMS
Website
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

55. CMS
Website
HTML
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

56. CMS
Website
HTML CSS
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

57. CMS
Website
HTML CSS Pictures
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

58. CMS
Website
HTML CSS Pictures Movies
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

59. CMS
Website
How to HTML CSS Pictures Movies
change?
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

60. CMS
Website
How to HTML CSS Pictures Movies
change?
Change text, html, css, pictures, movies -> upload
??
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

61. CMS
Website
How to HTML CSS Pictures Movies
change?
Change text, html, css, pictures, movies -> upload
??
Content Management System
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

62. CMS
Website
How to HTML CSS Pictures Movies
change?
Change text, html, css, pictures, movies -> upload
Content Management System
??
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

63. CMS
Website
How to HTML CSS Pictures Movies
change?
Change text, html, css, pictures, movies -> upload
Content Management System
??
>> A software application used to upload, edit and manage
content displayed on a website. It provides a collection of
procedures used to manage workflow in a collaborative
environment.
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

64. CMS
Website
How to HTML CSS Pictures Movies
change?
Change text, html, css, pictures, movies -> upload
Content Management System
??
>> A software application used to upload, edit and manage
content displayed on a website. It provides a collection of
procedures used to manage workflow in a collaborative
environment.
Examples are....
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

65. Let’s CMS
RSU.My-Thai.org/wp-admin
Assignment: create a blog post
with video, link & picture in it.
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

66. More Technology
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

67. More Technology
Flash
Design Technology
Used to ‘style’
websites. Mainly
used for: Videos,
Games & Magazines
Faces hard
competition with
HTML 5
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

68. More Technology
Flash XML
Design Technology Communication
Technology
Used to ‘style’
websites. Mainly Used to ease up the
used for: Videos, transfer of big data
Games & Magazines sets. Readable for
computers.
Faces hard
competition with Examples: Sitemaps,
HTML 5 Customer lists
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

69. More Technology
Flash XML Ajax
Design Technology Communication Communication
Technology Technology
Used to ‘style’
websites. Mainly Used to ease up the Used to ease up
used for: Videos, transfer of big data communication
between server &
Games & Magazines sets. Readable for
website.
computers.
Faces hard
Shows new information
competition with Examples: Sitemaps, without reloading the
HTML 5 Customer lists website
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

70. More Technology
Flash XML Ajax Languages
Design Technology Communication Communication
Technology Technology
Used to ‘style’ PHP, Ruby, Perl,
websites. Mainly Used to ease up the Used to ease up ASP.NET, Java,
used for: Videos, transfer of big data communication JavaScript, C, C#
between server &
Games & Magazines sets. Readable for
website.
computers. and many more...
Faces hard
Shows new information
competition with Examples: Sitemaps, without reloading the
HTML 5 Customer lists website
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

71. Let’s repeat
Java
VisualBasic
ASP.Net
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

72. Let’s repeat
Java
VisualBasic
ASP.Net
upload
files
Edit existing websites /
add content
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

73. Let’s repeat
Java
VisualBasic
ASP.Net
upload
files
CMS
Edit existing websites /
add content
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

74. Let’s repeat
protocols (http(s),
Java ftp, etc...)
VisualBasic
IP (127.56.402.20)
ASP.Net
Databases
(SQL)
upload
files
CMS
Edit existing websites /
add content
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

75. Let’s repeat
communication
protocols (http(s),
Java ftp, etc...)
VisualBasic
IP (127.56.402.20)
ASP.Net
Databases
(SQL)
upload
files
CMS
Edit existing websites /
add content
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

76. Let’s repeat
communication
protocols (http(s),
Java ftp, etc...)
VisualBasic
IP (127.56.402.20)
ASP.Net
Databases
(SQL)
upload
files
CMS
Edit existing websites /
add content
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

77. Let’s repeat
communication
protocols (http(s),
Java ftp, etc...)
VisualBasic
IP (127.56.402.20)
ASP.Net Flash Databases
php (SQL)
HTML upload
CSS
files
CMS
Edit existing websites /
add content
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

78. Let’s repeat
create
websites communication
protocols (http(s),
Java ftp, etc...)
VisualBasic
IP (127.56.402.20)
ASP.Net Flash Databases
php (SQL)
HTML upload
CSS
files
CMS
Edit existing websites /
add content
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

79. Let’s repeat
create
websites communication
protocols (http(s),
Java ftp, etc...)
VisualBasic
IP (127.56.402.20)
ASP.Net awesome
Flash Databases
php
Website (SQL)
HTML upload
CSS
files
CMS
Edit existing websites /
add content
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College

80. Call me, maybe
Name : AJ Sascha Funk
Address : RIC Main Office, 2nd floor
Email : info@sayfun.me || facebook.com/SaschaFunk
Phone : 02-997-2200 Ext. 4016, 082 101 328 9
Script: http://sayfun.me/students-stuff/RIC/
Final Exam:
17
September
www.sayfun.me | AJ Sascha Funk | Information Technology & Its Applications | Rangsit University - International College