1 / 20

Introduction to Web Development

Introduction to Web Development. 9/1/2015 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.

bowenl
Download Presentation

Introduction to Web Development

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Introduction toWeb Development 9/1/2015 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 • 1962 - 1969 – Internet started withresearch 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 • 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 email@yourdomain.com

  4. History of Websites • Web development content was mostly open source and free/ low cost (browsers, Java, Flash, domains, hosting) • Angelfire, GeoCities offered free web hosting • 2000 - hackers • Animations, video, sound content, fillable forms, databases = richer UI, dynamic content • blogging sites, social media, Web 2.0 • Tables were discarded for CSS • Content Management Systems (CMS) eg. Wordpress, Wix, Drupal, Joomla • Flash media can’t be indexed by search engines => Silverlight, HTML5 • Websites for mobile platforms

  5. 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

  6. What is HTML? • Hypertext: information accessed by clicking hyperlinks (in no set order) • Markup: HTML “tags” mark text as a type.Eg. <em>italics</em> • Language: Computer language for website creation In order to build or edit websites, basic knowledge of HTML is necessary.

  7. 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/

  8. Writing HTMLExamples • Container tags: <body>This is website text</body> <open tag>content</close tag><strong>This is bold text</strong> • 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)

  9. Writing HTML • 4 “ultimate” tags of a webpage: <!doctype> <html> <head></head> <body></body> </html> • Insert content into body tags: <body>This is some awesome website content!</body> • 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

  10. Writing HTML • 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 • <strong>This text is bold<em>and this is bold and italic</em></strong> • Note that the inner/contained tags is closed before the outer/containing one. 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 • <strong> Makes text bold • <em> Makes text italics

  11. Writing HTML • LISTS • 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. FONT • <font size> • <font family> • <font color> • Related tags can be condensed: • <font family=“Arial”; size=“12pt”; color=“red”>Text goes here</font> HEADINGS • <h1> to <h6>

  12. Writing HTML: 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/ ANCHORThese link to a specified section on the same webpage • First, insert the anchor id at the specified section: <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>

  13. 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, 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

  14. CSS Terminology #menu { width: 500px;} • In CSS terminology, this entire line is a rule. This rule starts with #menu, 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!

  15. 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 {font-size:12pt;} • Common properties you can style: • Width, height, font-family, font-size, font-color, background-color, background-image, padding, margin, text-decorationCOMPLETE LIST:https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

  16. 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

  17. 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

  18. 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)

  19. Trends in Web Design http://www.creativebloq.com/web-design/layout-trends-2015-so-far-71515699 • AWARD WINNING DESIGN: http://www.cssdesignawards.com/wotd-award-winners

  20. Build Your First Web Page! • DIV tutorial https://www.youtube.com/watch?v=2sxz1duInsk Quiz! • On this material on Wednesday, January 27, 2016

More Related