Intro to Web Technology

In Week 6 we will look at basic Web technologies as we work on our Community Project:

  • Client:
    • Browser on computers and mobile devices
    • Sends Request for a URL (Uniform Resource Locator – expects to get HTML back
    • Browsers all know how to read HTML
    • Executes Client-Side code: Many Websites rely on the Browser’s ability to execute JavaScript
  • Server:
    • Runs Web Server software (IIS on Windows, Apache, etc. that “Serves” up the Web pages
    • Sends Response as HTML to the Browser
    • Hosts and executes Server-side code modules
      • Code can be in PHP, Java, C# (ASP.NET), etc.
    • Hosts images and scripts for the site
      • May host HTML pages but the HTML Response could also be generated “on the fly” by the code
  • HTML
    • Hypertext Markup Language
    • Determines structure of the page layout
    • Basic structure of an HTML page
      • HTML <html></html> outer wrapper for the whole page
      • Head: contains metadata and title; note that the title appears on the tabs in browser <head><title>My Web Site</title></head>
      • Body: <body></body> precedes the closing </html> tag; contains the content for the page. Content within the body can be structured with other tags, like <h1> for header, <p> for paragraph.
      • Each tag has to have a matching closing tag
  • CSS
    • Cascading Style Sheet
    • Determines appearance of the page
    • Defines style attributes for specific tags or specific named items on a page or site
    • Can also define style for a class of items (more on this later…)
  • View Source/Developer’s Tools
    • Usually an option from the Browser’s shortcut menu: “View Source” or “View Page Source” allows you to see the actual HTML
    • Developer’s Tools: allows you to see much more of the structure of the site, including the CSS, scripts, etc. You can try out and preview some modifications here as well
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s