Interactive Media # 1

Aka DES261

Week # 9

Help me Help you.

So, I'd like to get feedback about how I'm teaching and I'm willing to make it public. I take the feedback seriously, since it not only helps me, but also future students.

Please take the time to go to ratemyprofessors.com and write an honest review based on clarity, easiness and helpfulness. 

YOUR REVIEW WILL NOT AFFECT YOUR GRADE WHATSOEVER (you have this in writing for proof), SO FEEL FREE TO BE OPEN ABOUT WHAT YOU WRITE!

Let's go over your Assignment

Finish 1 page of HTML. That is, there should be a single page of HTML that represents a page on your comp.

Please email me your html page to omarpatel123@gmail.com. 

Continue

Implementing HTML & CSS into your Project

Hopefully, you've already completed your first HTML page. I'll be giving feedback on your page as you work on your projects. Let's continue working on building them up. I'll be here to help you out, so please ask me questions if you're stuck!

HTML and CSS Reference

HTML: http://www.w3.org/community/webed/wiki/HTML/Elements

 

CSS: http://www.w3.org/community/webed/wiki/CSS/Properties

Creating a basic navigation menu

http://www.w3schools.com/css/css_navbar.asp

Reminder

You now have 2 choices: 

1. If you feel comfortable with building up your project based on the knowledge you learned, simply open up sublime text and start building it!

2. If you're still confused on how to implement the HTML & CSS you learned, you can either:

a) Go to the https://www.codecademy.com/en/skills/make-a-website tutorial and use that to learn how to implement the skills you just gained. 

b) Ask me and I can help show you the steps you need to take to construct your project.

Basic Structure of a Web Application

  1. Directory Structure

    1. HTML files

    2. index.html

    3. assets

      1. CSS files

      2. JavaScript Files

      3. images

 

What every Web application should have

  1. HTML

  2. CSS

Basic structure of an HTML File

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <link rel="stylesheet" type="text/css" href="stylsheet.css">
    </head>

    <body>


    </body>
</html>

Example of a linked CSS file located in assets/CSS/stylesheet.css

body {
    color: gray;
    font-size: 12px
}

Linking Files

<header id="header">
	<a href="index.html"><img class="house_logo" src="assets/images/house.png"></a>
	<nav id="nav">
		<ul>
			<li><a href="html_files/contact.html">Contact Us</a></li>
			<li><a href="html_files/about.html">About</a></li>
			<li><a href="html_files/property_management.html">Property Management</a></li>
			<li><a href="html_files/sellers.html">Sellers</a></li>
			<li><a href="html_files/buyers.html">Buyers</a></li>
			<li><a href="index.html">Home</a></li>
		</ul>
	</nav>
</header>

Sample Site and Code

Site: http://osp123.github.io/Dad_site/

Code: https://github.com/OSP123/Dad_site

Assignment # 9

Now that you have finished the HTML for a single page, I'd like you to finish up up at least another 2 HTML pages for your project. I've given you more time in class to make up for the increase in the breadth of the assignment. 

No Quiz, just work on projects!

Next Week's Quiz

Copy of Interactive Media # 1 Week 9

By Omar Patel

Made with Slides.com

Copy of Interactive Media # 1 Week 9

  • 706

More from Omar Patel