CME222�Internet Based Programming
2018 Summer School
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.
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.
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.
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
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
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
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
The World Wide Web (WWW)
Communication around the world.
To join this network we must have IP address.
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
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�
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:
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
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
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)
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!
HTML Versions
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
Structure of an HTML Page
<!DOCTYPE html>�<html>� <head>� information about the page (Non-visible part)� </head>�� <body>� page contents (Visible part)� </body>�</html>
Paragraph <p>
<p> Lorem ipsum dolor sit amet. </p>
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>
Horizontal rule: <hr />
<p>First paragraph</p>�<hr />�<p>Second paragraph</p>
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)
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" />
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>
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!
Comments : <!-- ... -->
Comments to document your HTML file or "comment out" text.
<!-- Header start -->
…
<!-- Header end -->
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>
Unordered Lists: <ul>, <li>
A list can contain other lists:�
Ordered Lists: <ol>, <li>
ol represents a numbered list of items
Definition List: <dl>, <dt>, <dd>
dl represents a list of definitions of terms (block) �dt represents each term, and dd its definition.
Quotations: <blockquote>
<p>Oscar Wilde said that � <q>Be yourself; everyone else is already taken.</q>�</p>
Inline Codes: <code>
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" />
Tables : <table><tr><td><th>
A 2D table of rows and columns of data (block element).��
Tables : <table><tr><td><th>
A 2D table of rows and columns of data (block element).��
Caption
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.
Cell Padding
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.
Frames: <iframe>
<iframe frameborder=1 src="http://karabuk.edu.tr"></iframe>
attributes:�width, frameborder, src etc.
https://www.w3schools.com/tags/tag_iframe.asp
Ex.
<iframe
frameborder="1"
width="500"
height="500"
src="http://karabuk.edu.tr">
</iframe>
Example:
for testing;
https://validator.w3.org/
References