1 / 20

Web Design Essentials for Nonprofits: HTML, CSS, JS, PHP

Learn web design basics with a focus on creating sites for nonprofits. This capstone course covers HTML, CSS, Javascript, PHP, MySQL, and Content Management Systems. Understand how elements like HTML, CSS, and PHP work together to build dynamic web pages. Dive into the structure of web development, client-server interactions, and the basics of HTML. Develop your skills through quizzes and projects. Resources and support provided.

odina
Télécharger la présentation

Web Design Essentials for Nonprofits: HTML, CSS, JS, PHP

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. ALBERT WAVERING BOBBY SENG CPSP 229D: Web design

  2. Welcome • Introductions • Existing knowledge? • Laptops? • Course goals • Introduction to several topics • Encourage creativity • Develop a site for a nonprofit, etc. for capstone

  3. Topics • HTML • CSS • Javascript • PHP • MySQL • Content Management Systems

  4. Course Structure • 14 Classes • Weekly quizzes (don’t hate us) • Small homework projects • Grading: • Attendance/participation 25%Quizzes 25%Homework 50% • Half for serious, unique attempt, rest for correctness

  5. How The Internet Works • Series of tubes

  6. How The Internet Works • When a web page is loaded, what happens? • Specifically, your PC is a ‘client’ • Client -> DNS lookup (what is ‘google.com’?) • 74.125.39.106 • Client asks server for webpage • Server returns a static webpage or generates one to show the client based on any parameters

  7. Organization • What happens where?! • Server • Returns a static HTML file, OR • Renders and returns a page using PHP or any other server technology • Perhaps look up data from an SQL database • Client • Decides how the HTML and CSS will appear to the user • Runs any Javascript the page includes

  8. Analogy Time! • Client: hungry man • HTML: bread • CSS: peanut butter and jelly • Javascript: sandwich is now cut in half • PHP: the sandwich’s maker • MySQL: kitchen cabinet • Server: kitchen

  9. HTML • HyperTextMarkup Language • NOT a programming language • Consists of ‘elements’ denoted in a <tag> structure • Document Object Model • How the browser understands the page in order to display it • A browser interprets this to display a webpage • Outline-esque

  10. Sample HTML • <p>Hello, world!</p>

  11. That Was Easy • Yes, it was • Used <p> element • Defines a paragraph • Opening and closing tags • Few exceptions • Other elements?

  12. Some other elements • <p> Paragraph • <a> Link (anchor) • <table> Table • <ul> Unordered list • <div> Divider • <span> Span • <br/> Line break* • Many others

  13. Special elements • <head> • Defines header of HTML file • <body> • Defines content of HTML file • <title> • Defines title of page

  14. HTML Standard • Standard exists so all browsers show (somewhat) same page • Different browsers use different rendering engines • Firefox: Gecko • Chrome, Safari: WebKit • IE: Trident • Opera: Presto • Standard is self-defining (XHTML) • <!doctype html>

  15. Example <!doctype html> <html lang=en-us> <head> <title>Our First Page</title> </head> <body> <p>Hello, world!</p> <p>This is a webpage.</p> </body> </html>

  16. Attributes • Help customize an element • id (unique identification for an element) • class (category) • Text field value • Picture size

  17. Case Study: <img> Tag • Some attributes: • Source URL • Alternate text • Dimensions • Source • Either URL or local image • Example: • <img src="http://imgs.xkcd.com/comics/orbiter.png"/>

  18. Assignment • Create a webpage comprised of a single HTML file • Requirements: • Use at least three tags in addition to the standard required tags: <html>, <head>, <body>, <title> • Must pass W3C Validation: http://validator.w3.org/#validate_by_upload • Due by midnight next Wednesday the 8th • Email to sduwebship@gmail.com

  19. Tips and Tricks • View source • Right click a page, ‘view source’ to see HTML • Text editors (please do not use a word proc) • Mac: TextWrangler • http://www.barebones.com/products/textwrangler/ • PC: Notepad++ • http://notepad-plus-plus.org/

  20. Resources • Us! • sduwebship@gmail.com • We’ll try to answer ASAP, but no guarantees • Do not wait til the last day to ask us, we’re students too • Make honest attempt to figure out answer on your own first • Office hours TBD • http://www.w3schools.com/ • http://en.wikipedia.org • http://htmldog.com/

More Related