Introduction to Web & HTML Wednesday October 3 rd and Thursday October 4 th.
-
Upload
avice-kelly -
Category
Documents
-
view
222 -
download
0
Transcript of Introduction to Web & HTML Wednesday October 3 rd and Thursday October 4 th.
![Page 1: Introduction to Web & HTML Wednesday October 3 rd and Thursday October 4 th.](https://reader036.fdocuments.us/reader036/viewer/2022062315/5697bfa41a28abf838c9740b/html5/thumbnails/1.jpg)
Introduction to Web & HTML
Wednesday October 3rd and Thursday October 4th
![Page 2: Introduction to Web & HTML Wednesday October 3 rd and Thursday October 4 th.](https://reader036.fdocuments.us/reader036/viewer/2022062315/5697bfa41a28abf838c9740b/html5/thumbnails/2.jpg)
2
Topics
Web Terminology HTML
What is HTML Parts of an HTML Document HTML Tags
Required Common
![Page 3: Introduction to Web & HTML Wednesday October 3 rd and Thursday October 4 th.](https://reader036.fdocuments.us/reader036/viewer/2022062315/5697bfa41a28abf838c9740b/html5/thumbnails/3.jpg)
3
Internet vs. WWW
Most people use the two terms interchangeably but they are in fact different.
The Internet is a vast, international network, made up of computers and the physical connections (wires, routers, etc.) allowing them to communicate.
The World Wide Web (WWW or just the Web) is a collection of software that spans the Internet and enables the interlinking of documents and resources. Provides a way of accessing information on the Internet.
For more information about the history of the Internet and WWW:
http://en.wikipedia.org/wiki/Internet
![Page 4: Introduction to Web & HTML Wednesday October 3 rd and Thursday October 4 th.](https://reader036.fdocuments.us/reader036/viewer/2022062315/5697bfa41a28abf838c9740b/html5/thumbnails/4.jpg)
4
Web Servers and Clients
A Web server is a computer that is programmed to send files to browsers on other computers connected to the Internet.
The Web browser, such as Firefox or Internet Explorer, is the client that sends a request for a Web page.
The Web server answers the request and delivers the requested page to the browser so you can view it.
![Page 5: Introduction to Web & HTML Wednesday October 3 rd and Thursday October 4 th.](https://reader036.fdocuments.us/reader036/viewer/2022062315/5697bfa41a28abf838c9740b/html5/thumbnails/5.jpg)
5
HTTP
Stands for HyperText Transfer Protocol Allows computers on the WWW to
communicate with one another. Handles the “request” sent to the Web server
and the “response” received from the Web server.
![Page 6: Introduction to Web & HTML Wednesday October 3 rd and Thursday October 4 th.](https://reader036.fdocuments.us/reader036/viewer/2022062315/5697bfa41a28abf838c9740b/html5/thumbnails/6.jpg)
6
Web Server-Client Diagram
![Page 7: Introduction to Web & HTML Wednesday October 3 rd and Thursday October 4 th.](https://reader036.fdocuments.us/reader036/viewer/2022062315/5697bfa41a28abf838c9740b/html5/thumbnails/7.jpg)
7
URLs
Stands for Universal Resource Locator Also called the Web page’s address You typically type it into your Web browser’s location
bar when you want to view a Web page
http://www.umbc.edu
Name of Web server
Protocol needed to communicate with
Web server
![Page 8: Introduction to Web & HTML Wednesday October 3 rd and Thursday October 4 th.](https://reader036.fdocuments.us/reader036/viewer/2022062315/5697bfa41a28abf838c9740b/html5/thumbnails/8.jpg)
8
HTML
Stands for Hypertext Markup Language Used to create a Web page Made up of tags that specify how a document
should appear when displayed in a browser An excerpt from a sample HTML document:
<html>
<head>
<title>Bob’s Web page</title>
</head>
<body>
<h1>This is my first Web page</h1>
![Page 9: Introduction to Web & HTML Wednesday October 3 rd and Thursday October 4 th.](https://reader036.fdocuments.us/reader036/viewer/2022062315/5697bfa41a28abf838c9740b/html5/thumbnails/9.jpg)
9
HTML Tags
Most HTML tags work in pairs. There is an opening and a closing tag. For example:
<p>Some content here.</p> The <p>…</p> tag displays a paragraph <p> opens the paragraph (opening tag) </p> closes the paragraph (closing tag) “Some content here.” will be displayed on the
page
![Page 10: Introduction to Web & HTML Wednesday October 3 rd and Thursday October 4 th.](https://reader036.fdocuments.us/reader036/viewer/2022062315/5697bfa41a28abf838c9740b/html5/thumbnails/10.jpg)
10
Self-closing Tags
Some HTML tags are self closing. For example:
<br /> The <br /> tag will display a line break. Note that there is a space between the br
and the /.
![Page 11: Introduction to Web & HTML Wednesday October 3 rd and Thursday October 4 th.](https://reader036.fdocuments.us/reader036/viewer/2022062315/5697bfa41a28abf838c9740b/html5/thumbnails/11.jpg)
11
Required Tags
All HTML documents should have html, head and body tags, along with the DOCTYPE identifier. !DOCTYPE – Tells the browser which set of standards the
page adheres to <html>…</html> -- Surrounds the contents of the entire
page <head>…</head> -- Lists the identification information on
the page, such as the title <title>…</title> -- Gives the name of the page that
appears in the top of the browser window <body>…</body> -- Frames the content of the page to be
displayed in the browser
![Page 12: Introduction to Web & HTML Wednesday October 3 rd and Thursday October 4 th.](https://reader036.fdocuments.us/reader036/viewer/2022062315/5697bfa41a28abf838c9740b/html5/thumbnails/12.jpg)
12
Basic HTML Template
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/transitional.dtd”>
<html>
<head>
<title>CMSC104 HTML Template</title>
</head>
<body>
This is just a basic HTML template to be used in CMSC104.
</body>
</html>
Example file: template.html
![Page 13: Introduction to Web & HTML Wednesday October 3 rd and Thursday October 4 th.](https://reader036.fdocuments.us/reader036/viewer/2022062315/5697bfa41a28abf838c9740b/html5/thumbnails/13.jpg)
13
Basic HTML Template Screenshot
![Page 14: Introduction to Web & HTML Wednesday October 3 rd and Thursday October 4 th.](https://reader036.fdocuments.us/reader036/viewer/2022062315/5697bfa41a28abf838c9740b/html5/thumbnails/14.jpg)
14
Some Common HTML Tags and Their Meanings
<p>…</p> -- Creates a paragraph <br /> -- Adds a line break <hr /> -- Separates sections with a horizontal
rule <h1>…</h1> -- Displays a heading (h1-h6) <!--…--> -- Inserts a comment <ol>…</ol> -- Creates an ordered list <ul>…</ul> -- Creates an unordered list <img /> -- Inserts an image into the document <a>…</a> -- Inserts a link into the document
![Page 15: Introduction to Web & HTML Wednesday October 3 rd and Thursday October 4 th.](https://reader036.fdocuments.us/reader036/viewer/2022062315/5697bfa41a28abf838c9740b/html5/thumbnails/15.jpg)
15
Paragraph Example
<p>
The exam next week will consist of T/F, multiple choice, short answer and pseudocode questions. You cannot use a calculator.
</p>
<p>
After the exam, we will learn JavaScript. It should be fun!!
</p>
![Page 16: Introduction to Web & HTML Wednesday October 3 rd and Thursday October 4 th.](https://reader036.fdocuments.us/reader036/viewer/2022062315/5697bfa41a28abf838c9740b/html5/thumbnails/16.jpg)
16
Paragraph Example Screenshot
![Page 17: Introduction to Web & HTML Wednesday October 3 rd and Thursday October 4 th.](https://reader036.fdocuments.us/reader036/viewer/2022062315/5697bfa41a28abf838c9740b/html5/thumbnails/17.jpg)
17
Line Break Example
<p>
Roses are Red. <br />
Violets are Blue. <br />
You should study for Exam 1. <br />
It will be good for you!
</p>
![Page 18: Introduction to Web & HTML Wednesday October 3 rd and Thursday October 4 th.](https://reader036.fdocuments.us/reader036/viewer/2022062315/5697bfa41a28abf838c9740b/html5/thumbnails/18.jpg)
18
Line Break Example Screenshot
![Page 19: Introduction to Web & HTML Wednesday October 3 rd and Thursday October 4 th.](https://reader036.fdocuments.us/reader036/viewer/2022062315/5697bfa41a28abf838c9740b/html5/thumbnails/19.jpg)
19
Horizontal Rule Example
<p>
The exam next week will consist of T/F, multiple choice, short answer and pseudocode questions. You cannot use a calculator.
</p>
<hr />
<p>
After the exam, we will learn JavaScript. It should be fun!!
</p>
![Page 20: Introduction to Web & HTML Wednesday October 3 rd and Thursday October 4 th.](https://reader036.fdocuments.us/reader036/viewer/2022062315/5697bfa41a28abf838c9740b/html5/thumbnails/20.jpg)
20
Horizontal Rule Example Screenshot
![Page 21: Introduction to Web & HTML Wednesday October 3 rd and Thursday October 4 th.](https://reader036.fdocuments.us/reader036/viewer/2022062315/5697bfa41a28abf838c9740b/html5/thumbnails/21.jpg)
21
Heading Example
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
![Page 22: Introduction to Web & HTML Wednesday October 3 rd and Thursday October 4 th.](https://reader036.fdocuments.us/reader036/viewer/2022062315/5697bfa41a28abf838c9740b/html5/thumbnails/22.jpg)
22
Heading Example Screenshot
![Page 23: Introduction to Web & HTML Wednesday October 3 rd and Thursday October 4 th.](https://reader036.fdocuments.us/reader036/viewer/2022062315/5697bfa41a28abf838c9740b/html5/thumbnails/23.jpg)
23
Comment Example
<!-- This is just some sample html to illustrate the use of a comment -->
<p>
Here is my paragraph.
</p>
<!-- Here is another comment -->
![Page 24: Introduction to Web & HTML Wednesday October 3 rd and Thursday October 4 th.](https://reader036.fdocuments.us/reader036/viewer/2022062315/5697bfa41a28abf838c9740b/html5/thumbnails/24.jpg)
24
Heading Example Screenshot
![Page 25: Introduction to Web & HTML Wednesday October 3 rd and Thursday October 4 th.](https://reader036.fdocuments.us/reader036/viewer/2022062315/5697bfa41a28abf838c9740b/html5/thumbnails/25.jpg)
25
Ordered List Example
<ol>
<li>Finish Homework 2.</li>
<li>Print Review Questions for Exam 1.</li>
<li>Work on Review Questions for Exam 1.</li>
</ol>
![Page 26: Introduction to Web & HTML Wednesday October 3 rd and Thursday October 4 th.](https://reader036.fdocuments.us/reader036/viewer/2022062315/5697bfa41a28abf838c9740b/html5/thumbnails/26.jpg)
26
Ordered List Screenshot
![Page 27: Introduction to Web & HTML Wednesday October 3 rd and Thursday October 4 th.](https://reader036.fdocuments.us/reader036/viewer/2022062315/5697bfa41a28abf838c9740b/html5/thumbnails/27.jpg)
27
Unordered List Example
<ul>
<li>country music</li>
<li>monday mornings</li>
<li>brussels sprouts</li>
</ul>
![Page 28: Introduction to Web & HTML Wednesday October 3 rd and Thursday October 4 th.](https://reader036.fdocuments.us/reader036/viewer/2022062315/5697bfa41a28abf838c9740b/html5/thumbnails/28.jpg)
28
Unordered List Screenshot
![Page 29: Introduction to Web & HTML Wednesday October 3 rd and Thursday October 4 th.](https://reader036.fdocuments.us/reader036/viewer/2022062315/5697bfa41a28abf838c9740b/html5/thumbnails/29.jpg)
29
Link Example
<a href=“http://www.cs.umbc.edu/104/”>CMSC104 Main page</a>
![Page 30: Introduction to Web & HTML Wednesday October 3 rd and Thursday October 4 th.](https://reader036.fdocuments.us/reader036/viewer/2022062315/5697bfa41a28abf838c9740b/html5/thumbnails/30.jpg)
30
Link Screenshot
![Page 31: Introduction to Web & HTML Wednesday October 3 rd and Thursday October 4 th.](https://reader036.fdocuments.us/reader036/viewer/2022062315/5697bfa41a28abf838c9740b/html5/thumbnails/31.jpg)
31
Image Example
<img src=“images/linux-tux.png” alt=“Tux the Penguin” />
![Page 32: Introduction to Web & HTML Wednesday October 3 rd and Thursday October 4 th.](https://reader036.fdocuments.us/reader036/viewer/2022062315/5697bfa41a28abf838c9740b/html5/thumbnails/32.jpg)
32
Image Screenshot