Introduction to Web Development MAhmed Web Development and

  • Slides: 21
Download presentation
Introduction to Web Development MAhmed Web Development and Interactive Media

Introduction to Web Development MAhmed Web Development and Interactive Media

Basic Terminology • Website • Links, URL • WWW, Internet, Cloud • Resolution, DPI

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 –

History of the Web HOW DID IT ALL BEGIN? • 1962 - 1969 – Internet started with research at MIT and UCLA • Tim Berners-Lee and colleagues @ CERN 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 1990 s: FIRST BROWSERS, WEBSITES, DESIGNS, DOMAINS • 1993 –

History of the Web 1990 s: 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 90 s – websites were static HTML, limited layout & design, textheavy • Driven by desire for corporate domains and [email protected] com • Web development content was mostly open source and free/ low cost (browsers, Java, Flash, domains, hosting) • Angelfire, Geo. Cities offered free web hosting

History of the Web 2000 s: WEB 2. 0 EVOLUTION • 2000 - hackers

History of the Web 2000 s: 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 WHERE ARE WE NOW? • Tables discarded for CSS •

History of the Web 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, HTML 5 • HTML 5 replaces DIV structures • Websites for mobile platforms • Responsiveness • SEO

Web Development Terminology • • • Server/ Host, Domain HTTP, FTP Information Architecture Root

Web Development Terminology • • • Server/ Host, Domain HTTP, FTP Information Architecture Root directory File naming Wireframe HTML, CSS PHP, Java. Script DIVs Optimization COMPREHENSIVE LIST: https: //sarahlynndesign. com/blog/beginners-guide-to-website-design-terminology/

Web Designer Skills Visit: http: //www. careerbuilder. com/jobs-web-designer? keywords=web+designer&location= Sample Job Requirements from actual

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: Word. Press, HTML, Adobe Creative Suite (this is a MUST) • Development experience with HTML, Java. Script, AJAX, j. Query, 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, Java. Script, and CSS) with a clear understanding as to how design comps translate to digital-driven layout

What is HTML? • Hypertext: information accessed by clicking hyperlinks (in no set order)

What is HTML? • Hypertext: information accessed by clicking hyperlinks (in no set order) • Markup: HTML “tags” mark text as a type. Eg. <h 1>First Level Heading</h 1> • 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 •

What is HTML? Versions • XHTML/ XML (Extensible): HTML with stricter, proper syntax • HTML 5: • 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/Introduction. To. HTMLOnline. IMC. pdf http: //churchm. ag/differences-between-html 4 -html 5/

Writing HTML 5 Examples • Container tags: <open tag>content</close tag> <body>This is website text</body>

Writing HTML 5 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: MS Visual Studio Codem Dreamweaver, Notepad, Text. Edit (do not use Word Processors like MS Word)

Writing HTML 5 • All webpages begin with the declaration: <!DOCTYPE> • Then, there

Writing HTML 5 • 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 HTML 5 OTHER TAGS • <title> A helpful data tag which goes in

Writing HTML 5 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> • <h 1> Will set the text as a 1 st level heading </h 1> • 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><h 1>This text is a Heading within a paragraph</h 1>This text is the rest of the paragraph</p> Note that the inner/contained tag <h 1> is closed before the outer/containing one <p>.

Writing HTML & HTML 5 HTML ELEMENTS • <div id=“banner”>Banner goes here</div> HTML 5

Writing HTML & HTML 5 HTML ELEMENTS • <div id=“banner”>Banner goes here</div> HTML 5 SEMANTIC ELEMENTS http: //www. w 3 schools. com/html 5_semantic_elements. asp • • • <header>Logo and name of website</header> <nav>Main menu</nav> <section>For a section of the page</section> • 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> <article>An article about HBCUs</article> <aside>You could put a sidebar here</aside> <li>Orange</li> <footer>Copyright notice, etc</footer> <li>Banana</li> HEADINGS • LISTS <h 1> to <h 6> </ul> Try each of these, save and refresh your page to see the changes.

Writing HTML 5: Links ABSOLUTE • <a href="http: //www. howard. edu">Link to Howard University

Writing HTML 5: 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

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: 500 px; } • In CSS terminology, this entire

CSS Terminology nav { width: 500 px; } • 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 500 px is a value. • The semicolon after the property-value pair separates it from other property-value pairs in the same declaration. Code editors color-code these to make it easier for you!

Writing CSS • Classes (such as text) are styled using a period. Eg: h

Writing CSS • Classes (such as text) are styled using a period. Eg: h 1 {font-family: Arial; } • IDs (such as DIVs) are styled using a hash symbol # Eg: #logo {background-color: #000; } • HTML 5 elements (such as nav) are styled without a prefix Eg: nav {width: 500 px; } • Common properties you can style: • Width, height, font-family, font-size, font-color, backgroundimage, padding, margin, text-decoration COMPLETE LIST: https: //www. w 3 schools. com/css/default. asp

Setting up a Website • ROOT: The directory/folder that contains ALL web content that

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,

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

Build Your First Web Page! • DIV tutorial https: //www. youtube. com/watch? v=2 sxz

Build Your First Web Page! • DIV tutorial https: //www. youtube. com/watch? v=2 sxz 1 du. Insk Test! On this material