HTML Class

lOMoARcPSD|5929919
HTML - This class is taught by Dr. Paul Wiedemeier in Fall

2019. He provides only a
Internet Programming (University of Louisiana at Monroe)
Studocu is not sponsored or endorsed by any college or university

Downloaded by Marvin Tejol (sdssussg2012@gmail.com)
lOMoARcPSD|5929919
HTML
Prof: Dr. W
Date: 08/22/2019
File Transfer
How computers exchange files over TCP/IP or UDP/IP
→ File Transfer(collaboration)
→ Electronic Mail(communication)
→Internet Relay Chat (IRC)
Methods of File Transfer
1. Unicast
2. Broadcast
3. Multicast
4. Anycast
Unicast(One to some)

lOMoARcPSD|5929919
- Point to Point file transmission that uses TCP/IP(most common)
Broadcast(One to all)
- Point to All-Point file transmission that often uses UDP.(TCP has a huge
overhead with multiple destinations due to ACK)
Multicast(One to some or many)

- Point to Multipoint file transmission that uses UDP.(TCP has a huge
overhead with multiple destinations due to ACK)
- Receivers that “signify” that they want the file will receive the file
- Radios transmit their information to those who tune in.(Those
who choose will receive the transmission)
Anycast(One to some or many)

- Each source endpoint identifies a set of endpoints but the source
chooses only one or two destinations out of all possible destinations.
- Uses Ipv6 addressing scheme
- Google using the nearest/more convenient server out of many
possible servers for the search results
Application layer file transfer Protocol

- FTP(File Transfer Protocol)
- SCP(Secure Copy Protocol)
- HTTP(HyperText Transfer Protocol)/HTTPS(HyperText Transfer Protocol
Secure)

lOMoARcPSD|5929919
The Internet
- The Internet is a network of autonomous networks
- Each autonomous network, or domain, is controlled by a person,
company, institution, or organization.
- The autonomous network(the dotted lines) are connected to each other

via an ISP
- ISP→ Common Carriers,
Verizon, ATT
- The internet is comprised of Trillions
of computing devices
- Computers
- Routers
- Switches
- Each domain is responsible for its
own devices
- An Internet attached device has two
addresses:
- (Physical/Hardware/Mac address) Address(48bits)
- (Logical/Network address)IP address either IPv4(32bits) or/and
IPv6(128bits)
-

lOMoARcPSD|5929919
WEEK 2 (Class 1)
**Madness to my method or method to my madness**
- Some Internet attached devices are assigned English like names

- Fully Qualified Domain Names (FQDM)
- Eg. www.ulm.edu
- A FQDM is converted into an IP address by the Domain Name
System(DNS) function.
Protocols
**Client/Server computing**
Client computers request services from server computers(eg. mail, web file,
print)
A service request may include
- Retrieve data
- Store data
- Print data
Clients and servers will

communicate using well defined
application level protocol(http)
Mail - SMTP
Web- HTTP
File - FTP
Print- IPP (Internet printing

protocol)

lOMoARcPSD|5929919
A client needs 3 pieces of information in order to make a request
-Server’s IP address← DNS ← FQDN
-Communication Protocol← HTTP, FTP
- Resource← Server might or might not have the resource you requested, or
you are not authorized.
A communication protocol, or protocol, is simply a set of rules that govern

how a client and server communicate
- How to initiate, conduct, and terminate a communication session.
Examples of application layer protocols
- HTTP, FTP, NTP
URLs and URIs

A Uniform Resource Locator (URL) is a string characters that defines
specifically where a resource physically resides within the Internet.
Server
name
DCE(Distribute Company
Environment) places resources in
the environment
Our web client can speak FTP →

lOMoARcPSD|5929919
URI
- A string of characters used to genetically identify a resource
- Public://ResourceName
- Private://ResourceName
- All URLs are URIs
All URLs are URIs
HTTP
- A unicast protocol that utilizes a client/server model to transfer files
between two computers. (HTML, txt, pdf, docx, GIF, JPG, TIFF, PNG)
- Clients are web browsers that request, receive and display
messages (HTML data)
- Servers send messages in response to client requests
- The HTTP process
- A client initiates a TCP connection to a server via Internet Socket
port 80
- The server accepts the TCP connection from the client.
- The message is exchanged between the client and the
server(sends packets to the client)
- The server closes the TCP connection

lOMoARcPSD|5929919
- HTTP is a stateless protocol in that the server maintains no

information about past client requests.
HTTP versions
- Version 0.9
- Extremely simple, single line GET requests
- HTTP version 1.0
- Extended and more robust
- HTTP version 1.1
- Standardized protocol
- HTTP version 2.0
- Provides greater performance
HTTP REQUEST/RESPOND
- A client sends a REQUEST message to the server to request actions be
performed on the identified resource by the server
- A server sends a RESPOND message back to the client to inform them
about the status of the request
- REQUEST MESSAGES
- GET(Everytime you click a URL, it GETS the URL)(most common)
- Request data from server
- GET should not be used for operations that cause side-
effects, such as using it for taking actions in web
applications
- HEAD
- Like GET, but server only returns header information about
the server. Server will send basic info about itself(like what
version of html it is speaking..etc)
- Post(Eg, submitting an online form, sends back to server)
- Submits data to be processed by server
- Creates data
- PUT
- Similar to POST, but updates existing data
- DELETE
- Removes data from server
- RESPONSE MESSAGES

lOMoARcPSD|5929919
- 200 OK
- Success
- 404 FIle/Resource not found
- (100, 200(most common message), 300, 400, 500)
HTTP Header Information

- The REQUEST and RESPONSE messages include header information
- The REQUEST message header information includes
- Host HOST:yoda.cs.ulm.edu
- The FQDM of the host making request
- User-Agent
- The Operating SYstem and web browser the host is running
- The RESPONSE message header information includes
- Server
- Information about the server, including OS and web server
software
- Last-modified
- Information about when the requested resource was last
modified

lOMoARcPSD|5929919
LAMP Stack
● Lamp is an acronym for
○ Linux OS
○ Apache web server
○ MySQL database
○ PHP server-side development technology
ABCD Stack
● ABCD is an acronym for
○ A= OP system?
○ B= WebServer sw
○ C=Database sw
○ D=Server side sw
WISA Stack
● WISA is an acronym for
○ Windows OS
○ ISS web server
○ SQL database

lOMoARcPSD|5929919
10
○ ASP.NET server-side development technology

lOMoARcPSD|5929919
11
Markup Languages
● A document markup language provides a syntax, similar to a
programming language, that allows the author to define the following
○ The document’s content
○ The content’s structure
○ The content’s format
Content
● A document’s content may include words, sentences, and paragraphs.
● May also include audio and video
Structure
● Structure defines how the document’s content is logically organized
and displayed in a browser window.
● Eg. Paragraph
Format
● Format defines how the document’s content appears in a browser
window
● Includes
○ Bold, Underline, Italic
○ Font Family and Font Size
○ Text Color and Background Color
○

lOMoARcPSD|5929919
12

lOMoARcPSD|5929919
13

lOMoARcPSD|5929919
14

lOMoARcPSD|5929919
15

lOMoARcPSD|5929919
16

lOMoARcPSD|5929919
17

lOMoARcPSD|5929919
18

lOMoARcPSD|5929919
19

lOMoARcPSD|5929919
20

lOMoARcPSD|5929919
21

lOMoARcPSD|5929919
22

lOMoARcPSD|5929919
23

lOMoARcPSD|5929919
24

lOMoARcPSD|5929919
25

lOMoARcPSD|5929919
26

lOMoARcPSD|5929919
27

lOMoARcPSD|5929919
28

lOMoARcPSD|5929919
29

lOMoARcPSD|5929919
30

lOMoARcPSD|5929919
31
Web browser started to modify

during this time

lOMoARcPSD|5929919
32
Week 3(Class 2)
<br /> breaks the line
<hr /> adds a horizontal rule
HTML Heading
The Heading elements allow you to change the font size of the default font
within and HTML document.
- Automatically provides for a new-line!

- However, it is best practice to define font type in a CSS
Size HTML Heading elements
<h1> … </h1>
<h2> … </h2>
<h3> … </h3>
<h4> … </h4>
HTML Special Characters

Special characters can be displayed one of two ways
- Character (&aplha)
HTML Unordered Lists

The HTML unordered lists elements allow you to create lists where each item
begins with a bullet symbol
<ul>
<li>Cat</li>
<li>Dog</li>

lOMoARcPSD|5929919
33
<li>Frog</li>
</ul>
Nested HTML
<ul style=”list-style-type:X”>
X is..
Disc
Circle
Square
None

lOMoARcPSD|5929919
34

lOMoARcPSD|5929919
35

lOMoARcPSD|5929919
36

lOMoARcPSD|5929919
37

lOMoARcPSD|5929919
38

lOMoARcPSD|5929919
39

lOMoARcPSD|5929919
40

lOMoARcPSD|5929919
41

lOMoARcPSD|5929919
42

lOMoARcPSD|5929919
43

lOMoARcPSD|5929919
44
Basic HTML Tables

- The summary attribute provides a summary of the table’s purpose
and structure for user agents rendering to non-visual media as speech
and Braille.
- The width attribute specifies the described width of the entire table
and is intended for visual user agents.
- When percentage, the value is relative to the user agent’s
available horizontal space.
- In the absence of any width specification, table width is
determined by the user agent.
- The border attribute specifies the width of the frame around a table
- +ve integers display a border with
some thickness
- 0 specifies no border
- The cellspacing attribute specifies the
amount of space to leave between cells
- Specifically, how much space the user
agent should leave between
- The left side of the table and the
left-hand side of the leftmost
column
- The top of the table and the top
side of the topmost row.
- And so on for the right and
bottom of the table.
- The cellpadding attribute specifies the
amount of space to leave between the
border of the cell and its contents
- If the value of this attribute is a pixel length, all four margins
should be this distance from the contents.
- If the value of the attribute is a percentage length, then
- The top and bottom margins should be equally separated
from the content based on percentage of the vertical
space.

lOMoARcPSD|5929919
45
- The left and right margins should be equally separated

from the content based on percentage of the horizontal
space.
- The caption element describes the table’s content.
- Visual user agents allow sighted people to quickly grasp the
structure of the table from the heading as well as the caption.
- The table head and the table foot should contain information about
the table’s columns.
- The table body should contain rows of the table.
-
Each
<tr>...</tr> element pair defines a
row in the table
- Each <th>...</th> element pair defines a
column in the row in which it is defined
- Bold centered aligned text
- Each <td>...</td> element pair defines a column in the row in which
it is defined
- Left aligned text

lOMoARcPSD|5929919
46
Week 6(Class 1)
HTML FORMS
- An HTML form is a section of an HTML document containing normal
content, markup, special elements called form controls, and labels on
those controls
- Used generally to “complete” a form by modifying its controls, before
submitting the form to an agent for processing
form www Server side programming(php)

Clien serv Dat
t er aBa
se
Basic HTML FORMS

lOMoARcPSD|5929919
47
● The method attribute specifies which HTTP method will be used to

submit the form data set.
● Possible(case-insensitive) values are…
○ “get/GET”(the default)
○ “post/POST”
**Let the method be post if something is going to be changed in the

database**

lOMoARcPSD|5929919
48
**A form with no

action, method, and encryption type is possible with JS**
Input Control Form
RESET

lOMoARcPSD|5929919
49
SUBMIT
HIDDEN
**Form 1 should be completed before Form 2 and 3(hidden)**

lOMoARcPSD|5929919
50
TEXT

lOMoARcPSD|5929919
51

lOMoARcPSD|5929919
52

lOMoARcPSD|5929919
53
PASSWORD

lOMoARcPSD|5929919
54
CHECKBOX

lOMoARcPSD|5929919
55
Week 6(Class 2)
It is good practice to make sure one radio button is checked!!
Radio Buttons
- A radio button input form control is like a checkbox except that when
several share the same control name, they are mutually exclusive.
- That is, when one is switched “on”, all others with the same
name are switched “off”.
- If no radio button in a set, sharing the same control name, is
initially “on”, user agent behavior for choosing which control is
initially “on” is undefined.
- <input type = “radio” name=”text” value=”text”
checked=”checked” />
Image
- An image input form control creates a graphical submit button.
- The value of the src attribute specifies the URI of the image that
will decorate the button.
- For accessibility reasons, authors should provide alternate text
for the image via the alt attribute.
- <input type =”image” src=”URL” alt=”text”>
Textarea Form Control

- The HTML textarea element creates a multi-line text input control.
- User agents should use the contents of this element as the initial value
of the control and should render this text initially.
- Any input text becomes the current value.
- The textarea form control element…
<textarea name=”text” rows=”#” cols=”#”>

First line of initial text.
Second line of initial text.
</textarea>

lOMoARcPSD|5929919
56
Select Form Control

- The HTML select element creates a menu.
- Each choice offered by the menu is represented by an option element
- A select element must contain at least one option element.
- The select form control element…
<select multiple =”multiple” size=”#” name=”text”>
<option selected value = “text1”>text1</option>
.
.
<option>text2</option>
</select>
Happy CSS folks!!

HTML Class

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Class

Uploaded by

Copyright:

Available Formats

lOMoARcPSD|5929919

HTML - This class is taught by Dr. Paul Wiedemeier in Fall

Studocu is not sponsored or endorsed by any college or university

→Internet Relay Chat (IRC)

Methods of File Transfer

Downloaded by Marvin Tejol (sdssussg2012@gmail.com)

- Point to Point file transmission that uses TCP/IP(most common)

Multicast(One to some or many)

Anycast(One to some or many)

Application layer file transfer Protocol

Downloaded by Marvin Tejol (sdssussg2012@gmail.com)

- The autonomous network(the dotted lines) are connected to each other

Downloaded by Marvin Tejol (sdssussg2012@gmail.com)

- Some Internet attached devices are assigned English like names

A service request may include

Clients and servers will

Print- IPP (Internet printing

Downloaded by Marvin Tejol (sdssussg2012@gmail.com)

A client needs 3 pieces of information in order to make a request

-Server’s IP address← DNS ← FQDN

-Communication Protocol← HTTP, FTP

A communication protocol, or protocol, is simply a set of rules that govern

- How to initiate, conduct, and terminate a communication session.

Examples of application layer protocols

- HTTP, FTP, NTP

URLs and URIs

Our web client can speak FTP →

Downloaded by Marvin Tejol (sdssussg2012@gmail.com)

All URLs are URIs

Downloaded by Marvin Tejol (sdssussg2012@gmail.com)

- HTTP is a stateless protocol in that the server maintains no

Downloaded by Marvin Tejol (sdssussg2012@gmail.com)

HTTP Header Information

Downloaded by Marvin Tejol (sdssussg2012@gmail.com)

Downloaded by Marvin Tejol (sdssussg2012@gmail.com)

○ ASP.NET server-side development technology

Downloaded by Marvin Tejol (sdssussg2012@gmail.com)

Downloaded by Marvin Tejol (sdssussg2012@gmail.com)

Downloaded by Marvin Tejol (sdssussg2012@gmail.com)

Downloaded by Marvin Tejol (sdssussg2012@gmail.com)

Downloaded by Marvin Tejol (sdssussg2012@gmail.com)

Downloaded by Marvin Tejol (sdssussg2012@gmail.com)

Downloaded by Marvin Tejol (sdssussg2012@gmail.com)

Downloaded by Marvin Tejol (sdssussg2012@gmail.com)

Downloaded by Marvin Tejol (sdssussg2012@gmail.com)

Downloaded by Marvin Tejol (sdssussg2012@gmail.com)

Downloaded by Marvin Tejol (sdssussg2012@gmail.com)

Downloaded by Marvin Tejol (sdssussg2012@gmail.com)

Downloaded by Marvin Tejol (sdssussg2012@gmail.com)

Downloaded by Marvin Tejol (sdssussg2012@gmail.com)

Downloaded by Marvin Tejol (sdssussg2012@gmail.com)

Downloaded by Marvin Tejol (sdssussg2012@gmail.com)

Downloaded by Marvin Tejol (sdssussg2012@gmail.com)

Downloaded by Marvin Tejol (sdssussg2012@gmail.com)

Downloaded by Marvin Tejol (sdssussg2012@gmail.com)

Downloaded by Marvin Tejol (sdssussg2012@gmail.com)

Downloaded by Marvin Tejol (sdssussg2012@gmail.com)

Web browser started to modify

Downloaded by Marvin Tejol (sdssussg2012@gmail.com)

<hr /> adds a horizontal rule

- Automatically provides for a new-line!

Size HTML Heading elements

HTML Special Characters

HTML Unordered Lists

Form 1 should be completed before Form 2 and 3(hidden)