lab #10
fadoo
CS-1150-Lab-10.pptxHow to Submit Lab 10
Use Pilot Page and University Web Server to Submit this Weeks’s Lab
Go to Pilot Course Page and Use Dropbox Submission Link to upload your files
Also upload all your files to wright state web server – Steps on how to do this is shown at the end of the slideshow
You need to upload your work to Pilot and to University Web server to receive credit
1
CS 1150 – Lab 10 – HTML
Lab #10 Overview
Learn to write HTML Webpages
Using CSS to style Webpages
Lab #10 Due Date (with Extra Credit Points) - December 9th, 2018 11:59 PM
Lab #10 Due Date (without Extra Credit Points) - December 11th, 2018 11:59 PM
2
CS 1150 – Lab 10 – HTML
Extra Credit Points Allocation
Lab #10 Due Date (with Extra Credit Points) - December 9th, 2018 11:59 PM
If your score is >= 90% (27/30 or above) 5 Points
If your score is >= 80% (between 24/30 and 27/30) 4 Points
If your score is >= 60% (between 18/30 and 24/30) 3 Points
If your score is >= 60% (between 6/30 and 18/30) 2 Points
If your score is >= 60% (between 0/30 and 6/30) 1 Points
3
CS 1150 – Lab 10 – HTML
Introduction to HTML
4
Markup language to create Web pages
First introduced by Sir Tim Berners-Lee and developed and maintained by World Wide Web Consortium
Based on Tags. Eg – <h1></h1>, <br />, <img />
Some tags have closing tags but some don’t. Tags have attributes too. Eg – <img src=“mypic.jpg” />
CS 1150 – Lab 10 – HTML
Writing Your First HTML Web Page
5
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Hello World</h1>
<p>
Hi, this is Sanjaya, Welcome to my Web page!!!
</p>
</body>
</html>
HTML Code
HTML Header Tag
Title Tag
HTML Body
Paragraph Tag
Heading Style 1
CS 1150 – Lab 10 – HTML
HTML Heading Styles
6
There are 6 different heading styles in HTML from H1 to H6
Also note that the header section is optional in HTML
<html>
<body>
<h1>Hello World</h1>
<h2>Hello World</h2>
<h3>Hello World</h3>
<h4>Hello World</h4>
<h5>Hello World</h5>
<h6>Hello World</h6>
</body>
</html>
CS 1150 – Lab 10 – HTML
HTML – Simple Text Formatting
7
<html>
<body>
<p align="justify">
<b>This text is in bold face</b> while
<i>this text is italicized.</i>
</p>
</body>
</html>
CS 1150 – Lab 10 – HTML
HTML Lists – Ordered Lists
8
There are two types of lists
Ordered
Unordered
<html>
<body>
<h3>My Favorite Bands</h3>
<ol>
<li>Lamb of God</li>
<li>Linkin Park</li>
<li>Hoobastank</li>
</ol>
</body>
</html>
CS 1150 – Lab 10 – HTML
HTML Lists – Un-ordered Lists
9
There are two types of lists
Ordered
Unordered
<html>
<body>
<h3>My Favorite Bands</h3>
<ul>
<li>Lamb of God</li>
<li>Linkin Park</li>
<li>Hoobastank</li>
</ul>
</body>
</html>
CS 1150 – Lab 10 – HTML
Adding an Image to Your Web Page
10
<html>
<body>
<h2>My Pic</h2>
<img src=“xyz.jpg" />
<!-- change xyz.jpg with your image file name -->
</body>
</html>
CS 1150 – Lab 10 – HTML
Creating Links to Other Web Pages
11
<html>
<body>
<h2>Link to My Real Home Page</h2>
My real home page is
<a href="http://abcdef.org/researchers/xyz/">here</a>.
</body>
</html>
CS 1150 – Lab 10 – HTML
Writing JavaScript Code
12
<html>
<head>
<script type="text/javascript">
document.write("Hello World");
alert("Hello World");
</script>
</head>
<body>
</body>
</html>
HTML Code
HTML Header Code
SCRIPT Tags
HTML Body
Writes in to HTML File
Writes in to a Message Box
CS 1150 – Lab 10 – HTML
Using CSS
13
<html>
<head>
<link rel="stylesheet" type="text/css" href="your_css_file_name.css">
</head>
<body>
</body>
</html>
Linking CSS Style sheet to HTML File
CS 1150 – Lab 10 – HTML
Using CSS Styles
14
CS 1150 – Lab 10 – HTML
Using inline styles
<h1 style="color:blue;">This is a Blue Heading</h1>
Using Background Color
body { background-color: black; }
Using CSS Styles Cont.
15
CS 1150 – Lab 10 – HTML
Using Heading Styles
h1 { color: blue; }
Using Position
h2 { position: static; left: 100px; top: 150px; }
Using CSS Link Styles
16
CS 1150 – Lab 10 – HTML
/* unvisited link */ a:link { color: red; } /* visited link */ a:visited { color: green; }
/* mouse over link */ a:hover { color: black; } /* selected link */ a:active { color: blue; }
Using CSS Font Styles
17
CS 1150 – Lab 10 – HTML
p { font-family: "Times New Roman", Times, serif; }
p {
font: 15px arial, sans-serif;
}
h2 { font-size: 200%; }
p { font-size: 100%; }
Uploading Your Web Page to Web Server
18
Please read EasyGuideToUploadingWebPages.pdf document first. Everything you need to know to upload your Web page to the university Web server is very well explained there.
CS 1150 – Lab 10 – HTML
Uploading Your Web Page to Web Server Cont.
19
Open SSH Secure File Transfer Client Program
Click Quick Connect
Host Name – unixapps1.wright.edu
User Name – Your WID
Click Connect
CS 1150 – Lab 10 – HTML
Uploading Your Web Page to Web Server Cont.
20
Go to the place where you saved your HTML file (image, index.htm, links.htm etc.) using left pane
Double click on www directory in the right pane
Drag and Drop your files from left pane to right pane
CS 1150 – Lab 10 – HTML
Access your Web Page on the Web
21
Type the following URL into your Web browser after uploading your HTML files to www directory as described in the earlier slides http://www.wright.edu/~your_email_name/
My e-mail is [email protected] so this is how I access my web page http://www.wright.edu/~chiday.2/
CS 1150 – Lab 10 – HTML
