Difference between revisions of "Module 1"
(Moving old Module 1 content to Module 2) |
|||
| Line 1: | Line 1: | ||
| − | + | __NOTOC__ | |
| − | + | Module 1 introduces the fundamentals of HTML and CSS. You will first make a static document using HTML and CSS, and then you will make a portal to a Wikipedia search. | |
| + | |||
| + | '''Articles:''' | ||
| + | |||
| + | * [[HTML and CSS]] | ||
== Assignments == | == Assignments == | ||
| + | === Write a Birthday Card === | ||
| + | |||
| + | '''Write a birthday card to a friend or family member using HTML and CSS.''' Use HTML do define the content of the card (like the headings and the paragraphs), and use CSS to define the appearance. Some ideas: | ||
| + | |||
| + | * Make the background-color of the page baby blue and use purple ink to write a card to a little boy | ||
| + | * Make the text big and red, and include pictures of hearts | ||
| + | * Use a boxy font with text shadows to make your card look urban (more advanced) | ||
| + | |||
| + | Remember that you're in a computer science class (not an art class), so we don't care if your card looks ugly. The main thing is that you learn HTML and CSS and use them appropriately. | ||
| + | |||
| + | ==== How to Edit Your File ==== | ||
| + | |||
| + | Starting in Module 2, we will be using Komodo Edit as our primary development tool. However, for the purposes of this exercise, we want you to edit your HTML file using a more basic text editor. | ||
| + | |||
| + | * On Windows, consider Notepad++. This is already installed for you in the CEC labs. If you prefer to use your personal computer, you can download it from [http://notepad-plus-plus.org/ here]. | ||
| + | * On Mac OS X, consider TextWrangler. You can download it from [http://www.barebones.com/products/textwrangler/ here] or from the Apple App Store. | ||
| + | * Most Linux distributions come with gedit pre-installed, which you can use for this lab. | ||
| + | |||
| + | Please save your file as ''birthday.html'' from the plain text editor of your choice. | ||
| + | |||
| + | '''Important Note:''' Writing your web page in a word processor like Microsoft Word or even WordPad or TextEdit will ''not'' work. What you need is a plain text editor. | ||
| + | |||
| + | ==== How to View Your HTML Document ==== | ||
| + | |||
| + | Once you have ''birthday.html'', you can open it using your favorite web browser (like Firefox). For the purposes of this exercise, it suffices to right-click the file and tell it to "open with" Firefox. When the file opens, it should be under the file:/// protocol. | ||
| + | |||
| + | In Module 2, we will install a web server that serves up pages on the http:// protocol. | ||
| + | |||
| + | ==== Validation ==== | ||
| + | |||
| + | '''Your birthday card must pass the W3C Validator with no errors.''' From [http://validator.w3.org/ the validator], you can choose to upload your file. | ||
| + | |||
| + | For more information on validation, see the HTML and CSS guide: [[HTML and CSS#Validation]] | ||
| + | |||
| + | === Make a Portal to a Wikipedia Search === | ||
| + | '' under construction '' | ||
== Grading == | == Grading == | ||
Revision as of 21:50, 16 March 2013
Module 1 introduces the fundamentals of HTML and CSS. You will first make a static document using HTML and CSS, and then you will make a portal to a Wikipedia search.
Articles:
Assignments
Write a Birthday Card
Write a birthday card to a friend or family member using HTML and CSS. Use HTML do define the content of the card (like the headings and the paragraphs), and use CSS to define the appearance. Some ideas:
- Make the background-color of the page baby blue and use purple ink to write a card to a little boy
- Make the text big and red, and include pictures of hearts
- Use a boxy font with text shadows to make your card look urban (more advanced)
Remember that you're in a computer science class (not an art class), so we don't care if your card looks ugly. The main thing is that you learn HTML and CSS and use them appropriately.
How to Edit Your File
Starting in Module 2, we will be using Komodo Edit as our primary development tool. However, for the purposes of this exercise, we want you to edit your HTML file using a more basic text editor.
- On Windows, consider Notepad++. This is already installed for you in the CEC labs. If you prefer to use your personal computer, you can download it from here.
- On Mac OS X, consider TextWrangler. You can download it from here or from the Apple App Store.
- Most Linux distributions come with gedit pre-installed, which you can use for this lab.
Please save your file as birthday.html from the plain text editor of your choice.
Important Note: Writing your web page in a word processor like Microsoft Word or even WordPad or TextEdit will not work. What you need is a plain text editor.
How to View Your HTML Document
Once you have birthday.html, you can open it using your favorite web browser (like Firefox). For the purposes of this exercise, it suffices to right-click the file and tell it to "open with" Firefox. When the file opens, it should be under the file:/// protocol.
In Module 2, we will install a web server that serves up pages on the http:// protocol.
Validation
Your birthday card must pass the W3C Validator with no errors. From the validator, you can choose to upload your file.
For more information on validation, see the HTML and CSS guide: HTML and CSS#Validation
Make a Portal to a Wikipedia Search
under construction
Grading
There is a 1 point penalty for each day late. Do not come to class at 12:59 and expect a TA to be available.
