1 of 44

CME222�Internet Based Programming

2018 Summer School

2 of 44

Course Outlines

What should be your expectation for this course?

Website Design using HTML5 & CSS3

Server-Side Scripting using PHP

What is my expectation from you?

I hope you’ll be to create your personal website which is included dynamic pages.

3 of 44

Grading

%30 Midterm Exam

%10 Midterm Assignment

%40 Final Exam

%20 Final Assignment

You must attend at least 70% of course for participate to final exam.

After this class, I will not talk about exams.

4 of 44

The Internet

A connection of computer networks using the Internet Protocol (IP). IP is related with TCP and UDP protocols. TCP includes HTTP/FTP/SMTP etc. You can learn this terms in Data Communications class.

Internet contains all of protocols.

5 of 44

History of Internet

Began as a US Department of Defense network called ARPANET (1960s-70s)�initial services: electronic mail, file transfer�WWW created in 1989-91 by Tim Berners-Lee�popular web browsers released: Netscape 1994, IE 1995�Amazon.com opens in 1995; Google January 1996�Wikipedia launches 2001, MySpace in 2003, Facebook in 2004

6 of 44

Internet Organizations

Internet Engineering Task Force (IETF): internet protocol standards�Internet Corporation for Assigned Names and Numbers (ICANN): �decides top-level domain names�World Wide Web Consortium (W3C): web standards

7 of 44

Internet Protocol (IP)

a simple protocol for attempting to send data between two computers. Each computer has a 32-bit IP address written as four 8-bit numbers.

to find out your IP address: whatsmyip.com

8 of 44

Transmission Control Protocol (TCP)

adds multiplexing, guaranteed message delivery on top of IP.

multiplexing: multiple programs using the same IP address�port: a number given to each program or service�port 80: web browser (port 443 for secure browsing)�port 25: email�port 22: ssh

IP + TCP = TCP/IP

127.0.0.1:80 is your local server http port

9 of 44

The World Wide Web (WWW)

Communication around the world.

To join this network we must have IP address.

10 of 44

Web Servers and Browsers

Web Server: software that listens for web page requests. e.g. Apache, Windows IIS, Nginx.

If we want to publish our website to www, we must use web server.

Web Browser: fetches/displays documents from web servers�Mozilla Firefox, Microsoft Internet Explorer (IE), Apple Safari, Google Chrome, Opera

11 of 44

Domain Name System (DNS)

a set of servers that map written names to IP addresses�because names are easier to remember than IP addresses.�

Example: karabuk.edu.tr → 193.140.9.6�

12 of 44

Uniform Resource Locator (URL)

an identifier for the location of a document on a web site�a basic URL:�http://www.karabuk.edu.tr/contact/mail.html�~~~~ ~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~�protocol host path

upon entering this URL into the browser, it would:

  • ask the DNS server for the IP address of www.aw-bc.com
  • connect to that IP address at port 80
  • ask the server to GET /info/regesstepp/index.html
  • display the resulting page on the screen

13 of 44

More URL Components

anchor: jumps to a given section of a web page�http://www.textpad.com/download/index.html#downloads��port: for web servers on ports other than the default 80�http://www.karabuk.edu.tr:8080/secret/password.txt

query string: a set of parameters passed to a web program�http://www.google.com/search?q=karabuk+university&start=10�parameter q is set to "karabuk+university"�parameter start is set to 10

14 of 44

Hypertext Transport Protocol (HTTP)

The set of commands understood by a web server and sent from a browser.

some HTTP commands (your browser sends these internally):�GET filename : download�POST filename : send a web form response�PUT filename : upload

15 of 44

WWW Languages

Hypertext Markup Language (HTML): used for writing web pages�Cascading Style Sheets (CSS): stylistic info for web pages�PHP Hypertext Processor (PHP): dynamically create pages on a web server�JavaScript: interactive and programmable web pages (with libraries like jQuery)

16 of 44

Hyper Text Markup Language (HTML)

the language you use to write web pages.

you use elements to structure your content.

<img> <a> <table>...

The official web standards organization, called the W3C (short for World Wide Web Consortium), left HTML for dead way back in 1998. Now, new version is HTML5!

17 of 44

HTML Versions

18 of 44

HTML5 vs HTML

Balance between too-loose-ness of HTML 4 and too-strict-ness of XHTML.

Reduces the browser's need for plugins to display content, e.g. multimedia.

Make web content richer, semantically meaningful, descriptive, accessible.

XHTML

HTML5

19 of 44

Structure of an HTML Page

<!DOCTYPE html>�<html>� <head>� information about the page (Non-visible part)� </head>�� <body>� page contents (Visible part)� </body>�</html>

20 of 44

Paragraph <p>

<p> Lorem ipsum dolor sit amet. </p>

21 of 44

Headings: <h1>,<h2>...<h6>

<h1> Karabuk University </h1>

<h2> Engineering Faculty </h2>

<h3> Computer Engineering </h3>

<h4> Summer School </h4>

<h5> Internet Based Programming </h5>

22 of 44

Horizontal rule: <hr />

<p>First paragraph</p>�<hr />�<p>Second paragraph</p>

23 of 44

Images and Links <img> <a>

<img src="image url" alt=”description”

title=”tooltip” />

<a href="destination url">Click Here</a>

destination url: can be absolute (http://google.com) or relative (index.html)

24 of 44

More about HTML tags

Type 1: Contain additional information

syntax: <element attribute="value" attribute="value"> content </element>�example: <a href="page2.html">Next page</a>

�Type 2: don't contain content;�syntax: <element attribute="value" attribute="value" />�example: <hr />�example: <img src="bunny.jpg" alt="pic from Easter" />

25 of 44

Line break: <br />

forces a line break in the middle of a block element (inline)

<p>The Lord is my shepherd, I lack nothing.<br /> He makes me ie down in green pastures,<br /> he leads me beside quiet waters,<p>

26 of 44

Phrase Elements: <em>,<strong>

em: emphasized text (usually rendered in italic) �strong: strongly emphasized text (usually rendered in bold) �<p>� HTML is <em>really</em>,� <strong>REALLY</strong> fun!�</p>

�HTML is really REALLY fun!

27 of 44

Comments : <!-- ... -->

Comments to document your HTML file or "comment out" text.

<!-- Header start -->

<!-- Header end -->

28 of 44

Unordered Lists: <ul>, <li>

ul represents a bulleted list of items (block)

li represents a single item within the list (block)

<h1>Semester Courses</h1>

<ul>� <li>CME222 ITP </li>� <li>CME224 Logic </li>�</ul>

29 of 44

Unordered Lists: <ul>, <li>

A list can contain other lists:�

30 of 44

Ordered Lists: <ol>, <li>

ol represents a numbered list of items

31 of 44

Definition List: <dl>, <dt>, <dd>

dl represents a list of definitions of terms (block) �dt represents each term, and dd its definition.

32 of 44

Quotations: <blockquote>

<p>Oscar Wilde said that � <q>Be yourself; everyone else is already taken.</q>�</p>

33 of 44

Inline Codes: <code>

34 of 44

Webpage Metadata: <meta>

information about your page (for a browser, search engine, etc.)��<meta http-equiv="Content-Type"� content="text/html; charset=iso-8859-9" />

<meta name="description"� content="Computer Information Web Page" />�<meta name="keywords" content="html, php" />

35 of 44

Tables : <table><tr><td><th>

A 2D table of rows and columns of data (block element).��

36 of 44

Tables : <table><tr><td><th>

A 2D table of rows and columns of data (block element).��

37 of 44

Caption

38 of 44

Cell Spacing & Cell Padding

Cell Spacing

Cell Padding

<table cellspacing="10" border="1">

<table cellpadding="10" border="1">

*The cellspacing and cellpadding attribute of <table> is not supported in HTML5.

39 of 44

Cell Padding

40 of 44

Divisions: <div>

The <div> tag defines a division or a section in an HTML document. The <div> element is often used as a container for other HTML elements.

<div>

<p> Lorem ipsum dolor sit amet. </p>

</div>

It is used to design a page with CSS.

41 of 44

Frames: <iframe>

<iframe frameborder=1 src="http://karabuk.edu.tr"></iframe>

attributes:�width, frameborder, src etc.

https://www.w3schools.com/tags/tag_iframe.asp

42 of 44

Ex.

<iframe

frameborder="1"

width="500"

height="500"

src="http://karabuk.edu.tr">

</iframe>

43 of 44

Example:

for testing;

https://validator.w3.org/

44 of 44

References

  • http://www.math-cs.gordon.edu/courses/cps353
  • w3schools.com
  • HTML5 the missing manual. Matthew MacDonald.