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
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
Notes de l'éditeur
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
show smultron\nmake own example! http://www.w3schools.com/html/\nupload website to sayfun.me via ftp\n
show smultron\nmake own example! http://www.w3schools.com/html/\nupload website to sayfun.me via ftp\n
show smultron\nmake own example! http://www.w3schools.com/html/\nupload website to sayfun.me via ftp\n
show smultron\nmake own example! http://www.w3schools.com/html/\nupload website to sayfun.me via ftp\n
show smultron\nmake own example! http://www.w3schools.com/html/\nupload website to sayfun.me via ftp\n
show smultron\nmake own example! http://www.w3schools.com/html/\nupload website to sayfun.me via ftp\n
show smultron\nmake own example! http://www.w3schools.com/html/\nupload website to sayfun.me via ftp\n
show smultron\nmake own example! http://www.w3schools.com/html/\nupload website to sayfun.me via ftp\n
show smultron\nmake own example! http://www.w3schools.com/html/\nupload website to sayfun.me via ftp\n
\n
\n
\n
\n
\n
\n
5 more css statements\n
5 more css statements\n
5 more css statements\n
5 more css statements\n
students search for CMS online. examples: wordpress, joomla...\n
students search for CMS online. examples: wordpress, joomla...\n
students search for CMS online. examples: wordpress, joomla...\n
students search for CMS online. examples: wordpress, joomla...\n
students search for CMS online. examples: wordpress, joomla...\n
students search for CMS online. examples: wordpress, joomla...\n
students search for CMS online. examples: wordpress, joomla...\n
students search for CMS online. examples: wordpress, joomla...\n
students search for CMS online. examples: wordpress, joomla...\n
students search for CMS online. examples: wordpress, joomla...\n
students search for CMS online. examples: wordpress, joomla...\n
students search for CMS online. examples: wordpress, joomla...\n
students search for CMS online. examples: wordpress, joomla...\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
Homework: http://www.google.com/green/storyofsend/desktop/#/over-to-google - present in your own words\n\nnext: online class via hangout - guest lecturer\n\nnext homework: create website: ftp from me\n