1 / 39

INTRO TO WEB DEVELOPMENT

INTRO TO WEB DEVELOPMENT. Overview. Structure of the Internet Web site structure Site planning Web page editors Intro to HTML Intro to CSS Publishing to your PSU web space Further Resources. 1. Structure of the Internet.

boyd
Download Presentation

INTRO 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. INTRO TO WEB DEVELOPMENT

  2. Overview • Structure of the Internet • Web site structure • Site planning • Web page editors • Intro to HTML • Intro to CSS • Publishing to your PSU web space • Further Resources

  3. 1. Structure of the Internet The internet is a network of servercomputersand clientcomputers: Servers: Where web content is stored Clients: Regular computers

  4. I need to look at www.pdx.edu. Where is its server? 1. Structure of the Internet The internet is a network of servercomputersand clientcomputers: Domain Name Server Client (regular computer)

  5. Over here. 1. Structure of the Internet The internet is a network of servercomputersand clientcomputers: Domain Name Server Client (regular computer) PSU Web Server

  6. Give me www.pdx.edu 1. Structure of the Internet The internet is a network of servercomputersand clientcomputers: Client (regular computer) PSU Web Server

  7. 2. Web Site Structure • Web page: a single document that contains text, images and other media • Web site:a collection of web pages linked together • Web pages end in .html or .htm. • Every web page has web address, or URL.

  8. 2. Web Site Structure • Everything must be inside the root folder • Give files and folders lowercase names using letters, numbers and underscores only

  9. 2. Web Site Structure Updating a page: • Make the edits to the local files on your computer • Upload the edited files to the server, where they replace the older remote versions

  10. page2.html page2.html index.html index.html /images /images /subfolder /subfolder website_name odinID public_html 2. Web Site Structure Upload process for PSU servers: FTP/Upload

  11. 3. Site Planning Consider: • Purpose • Scope • Audience • Design • Complexity in advance!

  12. 4. Web Page Editors

  13. 5. Intro to HTML Essential parts of a web page: • Doctype, • <html> tags • head section • body section

  14. 5. Intro to HTML • HTML is a markup language, not a programming language. • Text consists of intermingled regular text and markup. • HTML markup consists of tags: <i>Italic sentence</i> written in the HTML code shows up as Italic sentence in a browser. Individual tags are also called elements.

  15. 5. Intro to HTML Two types of HTML tags: Paired tags enclose other content: Unpaired tags stand alone: <p>This is a paragraph. The browser will display it as a block of text with a little space above and below it, just like a paragraph in Microsoft Word. </p> <br /> inserts a forced line break <img />inserts an image

  16. 5. Intro to HTML Two display options for HTML tags: Block-level tagsdisplay as separate entities: Inline tags stay within their parent element:

  17. 5. Intro to HTML You can use as many tags as you like, but make sure to nest them properly:

  18. 5. Intro to HTML More than one space in the code is ignored:

  19. 5. Intro to HTML Tags have attributes. Some are optional, some are mandatory. <p align=“right”> This text will be aligned right instead of the default left. </p> This text will be aligned right instead of the default left. <imgsrc=”images/garter_snake.jpg” />

  20. 5. Intro to HTML Specifying Colors on the Web There are only 147 named colors:

  21. 5. Intro to HTML Specifying Colors on the Web There are only 147 named colors: For more options, use hex codes:

  22. 5. Intro to HTML Specifying Colors on the Web Note: you may see hex codes with the pattern ‘aabbcc’ abbreviated with a hex triplet, like this: Original: Abbreviated:

  23. 5. Intro to HTML Specifying Colors on the Web Particularly in CSS, colors are often specified using RGB values: Use whichever color system works best for you.

  24. 5. Intro to HTML Measurements on the Web • Pixels • Ems • Percentages

  25. 5. Intro to HTML Exercise: building a simple web page

  26. 6. Intro to CSS • CSS = Cascading Stylesheet = a set of rules that redefines how HTML tags display themselves by default. In other words: HTML tells what to display, CSS tells how to display it. HTML defines structure, CSS defines style • You can put the CSS rules in a few places: • Within the HTML page’s head section • As an external file that you link to in the head section • As an inline style

  27. 6. Intro to CSS • Including CSS in the head section of your HTML: <head> <title>Practice Page</title> <style type="text/css"> (CSS rules go here) </style> </head> Use this when you only need the styles for one page (example)

  28. 6. Intro to CSS • Linking to a separate CSS file (an “external style sheet”): <head> <title>Practice Page</title> <link rel=“stylesheet” type=“text/css” href=“mystyles.css” /> </head> This way, you can apply the same set of styles to many web pages. (example)

  29. 6. Intro to CSS • Anatomy of a CSS rule: <head> <title>Practice Page</title> <style type="text/css"> body { background-color: slategrey; } </style> </head>

  30. 6. Intro to CSS The selector: the name of the HTML tag this rule will affect. Here: everything on the page unless otherwise specified. • Anatomy of a CSS rule: <head> <title>Practice Page</title> <style type="text/css"> body { background-color: slategrey; } </style> </head>

  31. 6. Intro to CSS The selector: the name of the HTML tag this rule will affect. Here: everything on the page unless otherwise specified. • Anatomy of a CSS rule: <head> <title>Practice Page</title> <style type="text/css"> body { background-color: slategrey; } </style> </head> The property: the characteristic of the HTML tag you want to change

  32. 6. Intro to CSS The selector: the name of the HTML tag this rule will affect. Here: everything on the page unless otherwise specified. • Anatomy of a CSS rule: <head> <title>Practice Page</title> <style type="text/css"> body { background-color: slategrey; } </style> </head> The value: the new value for the property you chose The property: the characteristic of the HTML tag you want to change

  33. 6. Intro to CSS • Syntax is important! <head> <title>Practice Page</title> <style type="text/css"> body { background-color:slategrey; } </style> </head>

  34. 6. Intro to CSS • Syntax is important! <head> <title>Practice Page</title> <style type="text/css"> body { background-color:slategrey; } </style> </head> Enclose all the rules for one tag with curly braces

  35. 6. Intro to CSS • Syntax is important! <head> <title>Practice Page</title> <style type="text/css"> body { background-color:slategrey; } </style> </head> Put a colon (:) after the name of the property you’re changing Enclose all the rules for one tag with curly braces

  36. 6. Intro to CSS • Syntax is important! <head> <title>Practice Page</title> <style type="text/css"> body { background-color:slategrey; } </style> </head> Put a colon (:) after the name of the property you’re changing Put a semicolon (;)after each single rule Enclose all the rules for one tag with curly braces

  37. 6. Intro to CSS • You can add as many rules as you want. Conventional spacing of rules is like this: • But this is fine too – as long as your syntax is correct, spacing doesn’t matter: body { background-color: slategrey; color: cornsilk; font-size: 12px; } body {background-color: slategrey; color: cornsilk; font-size: 12px; }

  38. 6. Intro to CSS Exercise: adding CSS to a simple web page

  39. Useful Links: • http://www.w3schools.com (the web’s go-to HTML and CSS reference, with tutorials and “try it yourself” features too) • http://web.pdx.edu/~willic/resources.html (my web page, with a long list of free tutorials and references)

More Related