1. Course Intro & HTML
BITM 3730
Developing Web Applications
8/30
2. Agenda
• Overview of Course
• Professor Availability Info
• Blackboard Introduction
• Grading & Grading Scale
• How to Succeed in BITM 3730 Without Really Trying
• Academic Dishonesty
• HTML Basics
• Homework
4. Professor Availability Info
• Before class (4:30PM to start of class) and After class
• Digital hours available by appointment [via Skype, Zoom, or agreeable
technology tool]
7. Project Proposal Rough Draft
• Rough Draft (in 10/4
folder) due 10/17
• For this course you will be tasked with
creating a website (project). You will write
up a proposal describing your project.
Examples have been provided for you to
review and use as a guide. You are free to
create a personal website of interest to you
or for someone else (keeping in mind it will
be stored on the SHU server and therefore
not an official website).
• Your Rough Draft will be graded out of 50
points, with each section being scored 10
points each.
8. Project
Proposal
Rough
Draft
Criteria
Criteria Points
Introduction:
Describe you and who you are working for (Client name, project
title (i.e. My Dad's website), your name, and contact info
10
Problem:
Describe what you are doing (What are you doing? What is
website? e-commerce? static? dynamic?)
What issue does website solve? (example: selling shoes)
10
Solution:
Explain how you create the website and how it addressed the
issue mentioned above
10
Deliverables:
What will be included on your site? (pictures, pages, etc.)
include a drawing/sketch of your homepage
10
Process & Cost:
Describe the process you will use to create your project/website
Pretend you are charging someone for this project - calculate a
cost and explain how you come to this (i.e. $25 an hour times 50
hours of work could be your cost)
10
9. Project Proposal Final Draft
• Rough Draft (in 11/1
folder) due 11/7
• For this course you will be tasked with
creating a website (project). You will write
up a proposal describing your project.
Examples have been provided for you to
review and use as a guide. You are free to
create a personal website of interest to you
or for someone else (keeping in mind it will
be stored on the SHU server and therefore
not an official website).
• Your Final Draft will be graded out of 150
points. Use the feedback provided from the
Rough Draft to make appropriate changes.
10. Project
Proposal
Final
Draft
Criteria
Criteria Points
Introduction:
Describe you and who you are working for (Client name, project
title (i.e. My Dad's website), your name, and contact info
10
Problem:
Describe what you are doing (What are you doing? What is
website? e-commerce? static? dynamic?)
What issue does website solve? (example: selling shoes)
35
Solution:
Explain how you create the website and how it addressed the
issue mentioned above
35
Deliverables:
What will be included on your site? (pictures, pages, etc.)
include a drawing/sketch of your homepage
35
Process & Cost:
Describe the process you will use to create your project/website
Pretend you are charging someone for this project - calculate a
cost and explain how you come to this (i.e. $25 an hour times 50
hours of work could be your cost)
35
11. Project
• In 11/29 folder
• Due 12/5
Criteria Points
Appearance:
Does the website visually look good?
25
Deliverables:
Did you include the items described in your proposal?
(most should be on your site)
50
Process & Cost:
Did you create the website described?
Does it look like you came in at your referenced cost?
50
Course Info:
Did you use course materials? (HTML, CSS, forms,
JavaScript, etc.)
75
12. Project Presentation
• In 12/6 folder (submit PPT to dropbox)
• Presentations on 12/6 and 12/13
• For this course you will be tasked
with presenting on your project. You
will put together a PPT describing
your project. Examples have been
provided for you to review and use as
a guide. Your presentation will be a
timed 10 minute presentation.
• Resources on professional
presentations will be provided.
Please submit your PPT by 12/5.
13. Project
Presentation
Criteria
Criteria Points
Presentation Content:
Intro slide with Name and info
Slides describing Project Proposal
Slides describing project or you can pull up your website
and explain it
Slides describing any issues you had
50
Duration:
Your presentation should be as close to 10 minutes as
possible without going over
10
Presentation:
Graded on clarity and professional presentation
Avoid uh, umm, etc. - just pause instead
Keep eye contact with audience
avoid swaying of arms, toe tapping, or other distracting
motions
40
14. How to Succeed in BITM 3730
Without Really Trying
• Ask questions with any issues
• Submit homework assignments on time
• Participate in class
• Come to class on time
• Focus efforts on project components!!
15. Academic Dishonesty
• Please see Academic Dishonesty paragraphs on Course Syllabus
• Unless otherwise specified your work submitted should reflect you completed 100%
of the work and did not have any assistance from a classmate [i.e. copying]
• You should be able to do all course work based on my instruction and/or similar
walkthroughs on YouTube
16. Tools Needed for Class
• WYSIWYG Editor
• Google WYSIWYG HTML Editor and choose the one you would like to use
• Always save your files in Notepad and open them in your browser to check
• WinSCP
• Will discuss more during next class meeting
• courses.shu.edu
• Will discuss more during next class meeting
17. What is HTML?
• HTML is the language for describing the structure of Web pages. HTML gives authors the
means to:
• Publish online documents with headings, text, tables, lists, photos, etc.
• Retrieve online information via hypertext links, at the click of a button.
• Design forms for conducting transactions with remote services, for use in searching for
information, making reservations, ordering products, etc.
• Include spread-sheets, video clips, sound clips, and other applications directly in their
documents.
• With HTML, authors describe the structure of pages using markup. The elements of the
language label pieces of content such as “paragraph,” “list,” “table,” and so on.
18. HTML Basics
• HTML stands for Hypertext Markup Language
• HTML consists of Tags and values
• Tags have Attributes specified as <font size=“+1”> where size is the
attribute and +1 is the value of the attribute. that are specified in the open
bracket.
19. HTML Snippet
• In the following HTML snippet name the following: tag, attribute, attribute
value and value: <font size=“+1”>Test font</font>
• Tag = font
• Attribute = size
• Attribute value = +1
• Value = Test font
• Why does </font> appear at the end?
• To close out the tag in the HTML code
20. Static vs. Dynamic Websites
• Static Websites
• Never change
• Unless the HTML code is changed
and uploaded to web server
• Dynamic Websites
• Can change based on an event or data
based on code in the website
• Common occurrences of this are
dates/times on a website
21. Important Code
• <!DOCTYPE html>
<html lang="en">
<head>
<title>Title of the document</title>
</head>
<body>
</body>
</html>
• This HTML code indicates the title of the
web page is Important Code
• The <head> element is a container for
metadata (data about data) and is placed
between the <html> tag and the <body>
tag.
• Metadata is data about the HTML
document. Metadata is not displayed.
• Metadata typically define the document
title, character set, styles, scripts, and other
meta information.
22. <body></body> tag
• The <body> tag defines the document's body.
• The <body> element contains all the contents of an HTML document, such
as headings, paragraphs, images, hyperlinks, tables, lists, etc.
• Note: There can only be one <body> element in an HTML document.
23. <ul></ul> tag
• An unordered HTML list:
• <ul>
• <li>Coffee</li>
• <li>Tea</li>
• <li>Milk</li>
• </ul>
• The <ul> tag defines an unordered
(bulleted) list.
• Use the <ul> tag together with the <li>
tag to create unordered lists.
• Tip: Use CSS to style lists.
• Tip: For ordered lists, use the <ol> tag.
24. <li></li> tag
• The <li> tag defines a list item.
• The <li> tag is used inside ordered lists(<ol>), unordered lists (<ul>), and in menu lists (<menu>).
• In <ul> and <menu>, the list items will usually be displayed with bullet points.
• In <ol>, the list items will usually be displayed with numbers or letters.
• Tip: Use CSS to style lists.
25. <a></a> tag
• The <a> tag defines a hyperlink, which is used to link from one page to another.
• The most important attribute of the <a> element is the href attribute, which indicates the
link's destination.
• By default, links will appear as follows in all browsers:
• An unvisited link is underlined and blue
• A visited link is underlined and purple
• An active link is underlined and red
26. <a href….</a>
• How to open a link in a new browser window:
• <a href="https://www.w3schools.com" target="_blank">Visit
W3Schools.com!</a>
• The hyperlink reference is to the website, the target opens the link in a new browser
window and the text Visit W3Schools.com! is the text listed which is linked to the
website.
28. Important Tags
• <p></p> for writing a paragraph with text
• <b> - Bold text
• <strong> - Important text
• <i> - Italic text
• <em> - Emphasized text
• <small> - Smaller text
29. <b> and <strong> tags
• In order to bold text you can use either the <b> or <strong> tags
• <b>Marino</b> will show up as Marino
• <strong>Marino</strong> will show up as Marino
• Notice they are both merely bold!
30. <i> and <em> tags
• In order to italicize text you can use either the <i> or <em> tags
• <i>Marino</i> will show up as Marino
• <em>Marino</em> will show up as Marino
• Notice they are both merely italic!
31. <small> tag
• This merely makes your text smaller without having to utilize the size
attribute or similar attributes within HTML code
• Ideally, you use this tag to deemphasize something [things that are not
important]
32. Homework
Assignment 1:
• Using the information taught in class create an HTML file index.html where you have a paragraph
describing yourself.
• Also, create a menu with the following links: Home, Favorite Sports Teams, and Contact Me
• Have the Favorite Sports Teams have a dropdown menu of at least three teams you like. (Examples
can include teams from Baseball, Football, Soccer, Basketball, Hockey, College, High School, etc.)
• Due to no class meeting on Labor Day these assignments are due 9/12
33. Homework 1 Getting Started
• To write a paragraph use the
<p>…</p> tag
<html>
<head>
<title>Your Name</title>
</head>
<body>
<p>Put paragraph here</p>
</body>
</html>
34. Homework 1 Getting Started
• To create your links use the <ul> and <il> tags
• Your code should go in the header section <head>
<ul>
<li><a href="" class="current">Home</a></li>
<li><a href="">Favorite Sports Teams</a></li>
<li><a href="">Contact Me</a></li>
</ul>
35. Homework 1 Getting Started
• You should use the <select> tag for your dropdown
<select name="teams" id="teams">
<option value="1">Team 1</option>
<option value="2">Team 2</option>
<option value="3">Team 3</option>
</select>
