(PowerPoint) Introduction to Web Development

Transcript (PowerPoint) Introduction to Web Development

Introduction to
Web Development
8/17/2016
Web Development and Interactive Media
Basic Terminology
• Website
• Links, URL
• WWW, Internet, Cloud
• Resolution, DPI
• Screen size – various devices
• Browser
• Platform
History of the Web
HOW DID IT ALL BEGIN?
• 1962 - 1969 – Internet started with research at MIT and UCLA
• Tim Berners-Lee and colleagues @ European Lab for Particle Physics
(Switzerland) created the first HTML, HTTP, server, browser
• 1990 – first web server on Unix in Switzerland
• 1991 – first web server in Stanford, CA
History of the Web
1990s: FIRST BROWSERS, WEBSITES, DESIGNS, DOMAINS
• 1993 – worldwide downloads of free Windows GUI browser, Mosaic
• Dot Com boom – Yahoo search engine, Amazon bookseller
• 1996 – browser wars: IE 3.0, Netscape Navigator 3.0
• Early 90s – websites were static HTML, limited layout & design, textheavy
• Driven by desire for corporate domains and [email protected]
• Web development content was mostly open source and free/ low cost
(browsers, Java, Flash, domains, hosting)
• Angelfire, GeoCities offered free web hosting
History of the Web
2000s: WEB 2.0 EVOLUTION
• 2000 - hackers
• Animations, video, sound
content, fillable forms,
databases
= richer UI, dynamic
content
• blogging sites, social
media, Web 2.0
History of the Web
2016: WHERE ARE WE NOW?
• Tables discarded for CSS
• Content Management Systems (CMS)
eg. Wordpress, Wix, Drupal, Joomla
• Flash goes kaput - Flash media can’t
be indexed by search engines =>
Silverlight, HTML5
• HTML5 replaces DIV structures
• Websites for mobile platforms
Web Development Terminology
•
•
•
•
•
•
•
•
•
•
Server/ Host, Domain
HTTP, FTP
Information Architecture
Root directory
File naming
Wireframe
HTML, CSS
PHP, JavaScript
DIVs
Optimization
COMPREHENSIVE LIST:
http://sarahlynndesign.com/blog/article/website-design-terminology
Web Designer Skills
Visit:
http://www.careerbuilder.com/jobs-web-designer?keywords=web+designer&location=
Sample Job Requirements from actual listed Web Designer positions
• Well versed in: WordPress, HTML, Adobe Creative Suite (this is a MUST)
• Development experience with HTML, JavaScript, AJAX, jQuery, and
Cascading Style Sheets (CSS)
• Demonstrated expertise in CSS and HTML (with fluency in hand coding)
• The ideal person for this role sees themselves as both a designer and a
front-end developer and couples their skills with Adobe Illustrator and
Photoshop with their working knowledge of HTML and CSS
• Basic proficiency in web design (Flash, HTML, Ajax, JavaScript, and CSS)
with a clear understanding as to how design comps translate to digitaldriven layout
What is HTML?
• Hypertext: information accessed by clicking
hyperlinks (in no set order)
• Markup: HTML “tags” mark text as a type.
Eg. <h1>First Level Heading</h1>
• Language: Computer language for website
creation
In order to build or edit websites, basic
knowledge of HTML is necessary.
What is HTML?
Versions
• XHTML/ XML (Extensible): HTML with stricter, proper syntax
• HTML5:
• Work in progress - not yet universally adapted by browsers/platforms
• Simplified
• New elements: <canvas> element (killed flash), <header>, <footer>, <section>,
<article>, <menu>, <figure>, <audio>, <video>
• Updated <form> elements
• Uses CSS only
SOURCES:
http://library.albany.edu/imc/html_tut/pdf/IntroductionToHTMLOnlineIMC.pdf
http://churchm.ag/differences-between-html4-html5/
Writing HTML5
Examples
• Container tags:
<open tag>content</close tag>
<body>This is website text</body>
• Single-part (non-container) tags:
</br> (creates a line break)
<p>This is a paragraph</p>
When writing HTML code, open and close your tags FIRST, then insert the content.
TOOLS:
Dreamweaver, Notepad, TextEdit (do not use Word Processors like MS Word)
Writing HTML5
• All webpages begin with the
declaration:
<!DOCTYPE>
• Then, there are 3 “ultimate” tags of a
webpage:
<html>
<head></head>
<body></body>
</html>
• Insert content into body tags:
<body>This is some awesome website
content!</body>
TEST IT OUT!
• Save file with name “index” and
extension “.html” => index.html
• Open file in a web browser
• Change the text to something different,
save and refresh the page in the browser
It isn't necessary to follow the File> Open
sequence every time you want to view
changes you made. Leave the page open
in the browser while you edit the HTML
file, save the file, then click the Refresh or
Reload button on your browser
Writing HTML5
OTHER TAGS
• <title> A helpful data tag which goes in
the head section. It’s content appears in
the top bar of the browser or browser
tab for users and search engines to
identify a page.
• <p> Paragraph tags separate text blocks
from other copy by line breaks </p>
• <h1> Will set the text as a 1st level
heading </h1>
• <br> creates a line break
Try each of these, save and refresh your
page to see the changes.
By now you will have noticed a pattern in
how container tags are formed. Only the
closing tag contains a forward slash /. This
forward slash tells the browser that it is the
end of the container.
You will also have noticed that only text
inside the container tag takes the property
of the tag.
NESTING TAGS
<p><h1>This text is a Heading within a
paragraph</h1>This text is the rest of the
paragraph</p>
Note that the inner/contained tag <h1> is
closed before the outer/containing one <p>.
Writing HTML & HTML5
HTML ELEMENTS
• <div id=“banner”>Banner goes here</div>
LISTS
• Ordered <ol>
(numbered, and importance is specified)
HTML5 SEMANTIC ELEMENTS
• Unordered <ul>
(bulleted, importance not specified)
• <header>Logo and name of website</header>
• <li> Each list item must be contained in the <li>
tag
http://www.w3schools.com/html/html5_semantic_elements.asp
• <nav>Main menu</nav>
• <section>For a section of the page</section>
Eg.
<ul>
• <article>An article about HBCUs</article>
<li>Apple</li>
• <aside>You could put a sidebar here</aside>
<li>Orange</li>
• <footer>Copyright notice, etc</footer>
<li>Banana</li>
</ul>
HEADINGS
•
<h1> to <h6>
Try each of these, save and refresh your
page to see the changes.
Writing HTML5: Links
ABSOLUTE
• <a href="http://www.howard.edu">Link to Howard University – an external page on the
www</a>
RELATIVE
• <a href=“contact.html">Link to the Contact page within the same website (in the root
directory)</a>
INTERNAL/ ANCHOR
These link to a specified section on the same webpage
• First, assign an id to the desired element: <div id=“top”>This is the top!</div>
• Then, create the link to go to that section: <a href="#top">Go to the top of this page</a>
What is CSS?
• Cascading stylesheets
• Define styles for your HTML, including the design,
layout and variations in display for different devices
and screen sizes
• Embeds in the <head> of a webpage (not
recommended), OR links/attaches as a separate file
(external)
• An external style sheet keeps the styles separate from your
HTML and
• Helps avoid duplication
• Makes maintenance easier
• Allows you to make a site-wide change in one place
CSS Terminology
#nav { width: 500px; }
• In CSS terminology, this entire line is a rule. This rule starts with #nav,
which is a selector. It selects which elements the rule applies to.
• The part inside the curly brackets is the declaration.
• The keyword width is a property, and 500px is a value.
• The semicolon after the property-value pair separates it from other
property-value pairs in the same declaration.
Dreamweaver color-codes these to make it easier for you!
Writing CSS
• Classes (such as text) are styled using a period .
Eg:
.h1 {font-family: Arial;}
• IDs (such as DIVs) are styled using a hash symbol #
Eg:
#menu {background-color:#000;}
• HTML5 elements (such as nav) are styled without a prefix
Eg:
nav {width:500px;}
• Common properties you can style:
• Width, height, font-family, font-size, font-color, background-color, backgroundimage, padding, margin, text-decoration
COMPLETE LIST:
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
Setting up a Website
• ROOT: The directory/folder that
contains ALL web content that is
uploaded to the server eg. HTML
files, images, PDFs.
Does NOT contain project
planning or design files such as
Photoshop mockups, information
architecture, design briefs
• Root folder should contain loose
HTML files and 3 folders: css,
images, templates
• Home page is always named
index.html
File Naming Conventions
•
•
•
•
•
•
•
•
•
NO spaces
NO special characters. Use ONLY letters, numbers, dash- and underscore_
NO uppercase letters
Use .html extension
Short but meaningful/descriptive
Use keywords, remove joining words like “and”, “for”, “the”
Frontload keywords, keep related pages named with frontloaded keywords
http://ed.fnal.gov/lincon/tech_web_naming.shtml
http://www.motive.co.nz/guides/design/naming-folders-and-files.php
First Step in Dreamweaver
Manage Sites!
• Webpages are linked. Dreamweaver manages these links to make your job
easier.
• Tell DW where your root directory is located (where ALL your website files
are) so that it can effectively manage your linked content.
• You only need to “Manages Sites” once – when you begin your web
project. However, if you move your root folder or change machines, you
will need to Manage Sites once more.
Dreamweaver’s File Manager!
• Use Dreamweaver’s File Manager to access and edit your web files. This
includes if renaming or moving files within your root. (Do NOT edit, rename
or move these files outside DW – ie using Explorer or Finder)
Build Your First Web Page!
• DIV tutorial
https://www.youtube.com/watch?v=2sxz1duInsk
Test!
On this material on Monday, September 12, 2016

(PowerPoint) Introduction to Web Development

Transcript (PowerPoint) Introduction to Web Development

Directory