Download presentation
Presentation is loading. Please wait.
1
Introduction to Web Development
8/17/ Web Development and Interactive Media
2
Basic Terminology Website Links, URL WWW, Internet, Cloud
Resolution, DPI Screen size – various devices Browser Platform
3
History of the Web HOW DID IT ALL BEGIN?
– Internet started with research at MIT and UCLA Tim Berners-Lee and 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
4
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, text- heavy Driven by desire for corporate domains and Web development content was mostly open source and free/ low cost (browsers, Java, Flash, domains, hosting) Angelfire, GeoCities offered free web hosting
5
History of the Web 2000s: WEB 2.0 EVOLUTION
hackers Animations, video, sound content, fillable forms, databases = richer UI, dynamic content blogging sites, social media, Web 2.0
6
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
7
Web Development Terminology
Server/ Host, Domain HTTP, FTP Information Architecture Root directory File naming Wireframe HTML, CSS PHP, JavaScript DIVs Optimization COMPREHENSIVE LIST:
8
Web Designer Skills Visit: 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 digital- driven layout
9
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.
10
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:
11
Writing HTML5 Examples Container tags: <body>This is website text</body> <open tag>content</close tag> <p>This is a paragraph</p> Single-part (non-container) tags: </br> (creates a line break) 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)
12
Writing HTML5 All webpages begin with the declaration: TEST IT OUT!
<!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
13
Writing HTML5 OTHER TAGS NESTING TAGS
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>. 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
14
Writing HTML & HTML5 LISTS HEADINGS HTML ELEMENTS
Ordered <ol> (numbered, and importance is specified) Unordered <ul> (bulleted, importance not specified) <li> Each list item must be contained in the <li> tag Eg. <ul> <li>Apple</li> <li>Orange</li> <li>Banana</li> </ul> Try each of these, save and refresh your page to see the changes. HTML ELEMENTS <div id=“banner”>Banner goes here</div> HTML5 SEMANTIC ELEMENTS <header>Logo and name of website</header> <nav>Main menu</nav> <section>For a section of the page</section> <article>An article about HBCUs</article> <aside>You could put a sidebar here</aside> <footer>Copyright notice, etc</footer> HEADINGS <h1> to <h6>
15
Writing HTML5: Links ABSOLUTE RELATIVE
<a href=" 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>
16
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
17
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!
18
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, background- image, padding, margin, text-decoration COMPLETE LIST:
19
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
20
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
21
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)
22
Build Your First Web Page!
DIV tutorial Test! On this material on Monday, September 12, 2016
Similar presentations
