introduction to web development in html web module day 1 is 201
TRANSCRIPT
Introduction to Web Development in HTMLWeb module day 1
IS 201
Where are we?
Topics: Paradigms Porter’s 5 Forces
Model Business Strategies Value Chain
Topics: Data quality and DBs Entity-Relationship
diagrams MS Access Tables and
Queries
Topics: Measures Excel Pivot Tables,
Charts Optimization with
Solver
Topics: Current trends IT Hardware IT Security and
Privacy
Topics: HTML 5 CSS basics CSS positioning
Topics: Flowcharting Systems Development
Life Cycle Visual Basic for
Applications in Excel
Topics: Data Mining using
Excel plug-in for SQL Server Analysis Services
Supplier Data
Competitor Data
Product/Inventory Data
Customer Data
Website Click Data
Marketing Data
Mobile App Location
Data
What kind of business are we in?
How do we do business?
What kind of data should we collect?
How do we fit all of this data
on a server and then pull it out
again as information?
What kinds of knowledge can we
create from this information?
How do we keep this information
safe and accessible?
How do we present this
information in a meaningful way?
How can clean and prepare this
information to make it useful for deeper analysis?
What kinds of smart business
decisions can be made from this
new knowledge?
3 day module on HTML and CSS
Introduction: Why Are We Learning HTML?
• “Every 2 Days We Create As Much Information As We Did Up To 2003” -Eric Schmidt (Google CEO)
• HTML is the “main markup language for creating web pages and other information that can be displayed in a web browser.” - Wikipedia
Introduction: Why Are We Learning HTML?
• A fundamental form of communication that gives you a competitive advantage
• Even if you never do web designing:– Tweaking online material– Emails– Understanding how the web
is structured gives you power:• Scrapping• Editing
http://mashable.com/2014/10/06/professionals-know-html-css/
How are we learning HTML?
• Code Academy – Hands-On = Exciting!– Life Long Learning
• Class– From scratch– Next Midterm: You will
create a site from scratch– Key terms and concepts
for midterm covered in Code academy instructions and in lecture
Code Academy
Code Academy• Glossary• Instruction• Practice
W3 Schools
Project• Let’s look at the instructions
on Learning Suite• Due October 28, 11:55 pm
HTML: What is it?
• The code you just created is part of the Hyper-Text Markup Language (HTML)– HTML: the primary markup language for displaying web pages and
other information in a web browser
• Not a programming language– Doesn’t calculate totals– Doesn’t validate forms– Doesn’t access databases
HTML: Related Technologies
• Internet– Global system of interconnected computers and networks
• World Wide Web– Network of interlinked web pages (a.k.a. “hypertext documents”)
• Web browsers– Software used to read HTML documents and display content
It’s All About the Tags
• HTML simply defines (i.e. “marks up”) content• Use white space, indentation
Editing Environments
• HTML consists of 256 ASCII characters• Use ASCII text characters to edit pages
– These save only text characters
• Good Editing Environments– Windows: Notepad++– Mac: Textwrangler– Either: Brackets
Day 1 Code Academy
• <!DOCTYPE html>• <html></html>• Tags• <head>• <title>• <body>• <p>• <h1>, <h2>, <h3>, <h4>,
<h5>, <h6>• <a> • <img>
• Indentation (review at end)• <ol>• <li>• <ul>• Nested lists• <!-- comment -->• style• font-size• color• font-family• background-color• text-align• <strong>• <em>
HTML Images
Concept Shows image on pageSyntax
<img src="address of the image"/>Examples
When image file is on external site<img src="http://s3.amazonaws.com/codecademy-blog/
assets/ninja_zpsa5dbe37a.jpg" />When image file is local (in same folder as html page)
<img src="espnlogo.jpg" />
HTML Links - Hyperlinks
ConceptPlace text or an imaged on page you can click on to
jump to , and jump to another document or locationSyntax
General Syntax <a href="destination">what shows on webpage</a>
Syntax when destination is an external site <a href="http://www.espn.com/">ESPN</a>
Syntax when destination is a subpage <a href="pentatonix.html">Visit ESPN website</a>
Syntax for showing image on page that jumps to another page <a href=http://www.espn.com/><img src="espnlogo.jpg"/></a>