POINTS: 35 points
SUMMARY: Create a simple web page through HTML coding.
SKILLS NEEDED: Understanding of beginning and ending codes and being able to place the indicated attributes into the code.
Double clicking on the file will open it in a web browser. A text editor must be used. Text editors may need special setting or a different way of opening the file.
- Do NOT use Word.
- For Windows computers, use Notepad (NOT Wordpad)
- Open Notepad
- Windows 7 - Click Start button then All Programs then Accessories then Notepad (NOT Wordpad)
- Windows 8 - If you have a Windows Accessory grouping on your start screen, select Notepad from there. If you don't have that grouping, click on All Apps from the status bad the bottom of the start screen. To see this on touch screen, flick up from the bottom of the screen. With a mouse, right clck on any blank area on your start screen. Find the Windows Accessory group and select.Notepad
- From the menu select File then Open. Navigate to the folder that
has your ICS101 files. Change the file type to all files (see below.)
Then select the weppage-yourname.html.
Below are instructions for adding HTML to the text in the Project 6 file. Type the beginning tag before the text specified and closing tag after the text specified in the instruction column.
|(1 pt) In the head section find the words "ICS101 Assignment - Web Page" make these the title (This will display in the title bar of the web page)||<title></title>|
|(1 pt) Format the words "Basics of web pages" as Heading 1 in the body section||
|(1 pt) In the first paragraph, format first occurrence of the word "Text" as bold||<strong></strong>|
|(1 pt) Format the word "difference" in the second paragraph as italic||<em></em>|
|(7 pt) Insert bullets into the list of items starting with "paragraphs" and ending with "table cells"||<ul> (before the list items)
<li></li> (for each item)
</ul> (after of the list items)
|(6 pt) Scroll down to the headings then format the Headings 1 -6 as each of the Heading styles.||
|(1 pt) In the paragraph after the list of the headings italicize the name of the book.||<em></em>|
|(1 pt) Format the quote (text beginning with "Web design is an art and a science" and ending with "different specialties") as a block quote||<blockquote>
|(1 pt) Format the words "Creating websites are a lot of fun" red||<span style="color:red">
|(1 pt)Create a link for the words "ICS107 Web Site Development". with the web address as shown in the code on the right.||
(1 pt) Save this picture of WCC's campus (Right click - Save Picture As) Save the picture to the same folder as your ICS101 files and be sure the name is wcccampus.png
Insert the image before the ending code </body>
|<img src="wcccampus.png" alt="Windward Community College campus" width="125" height="82">|
(2 pt) Add a paragraph after the image and before the ending code </body>
Between the paragraph codes, type in
|(8 pt) Under the paragraph in the last step. Add a number list. List 3 items that you enjoyed about ICS101||
<ol> (before the list items)
(1 pt) Create a division for the text, so that styles can be applied.
Scroll to the top of the document.
After the <body> tag (right below the head section) type in:
Scroll to the bottom of the document
Before the </body> (at the very bottom) type in:
|Save the file.|
Preview your page in a web browser by clicking on the file from your file listing. This is what the first generation of web pages looked like. Pretty boring, huh
Adding Simple Styles
Up to this point we've only made changes that are in basic HTML, the following changes create automatic cascading styles sheet (CSS). CSS allows much more flexibility in format and layout.
- (2 pt) Add the following code (between the lines) to the
Head section of the file below the title. (Don't type it -
copy & paste!)
font-family: Arial, Helvetica, sans-serif;
- Save. Close Notepad.
- Preview your page in a web browser. This allowed some quick CSS changes to affect the whole page.
- Submit on Laulima in Assignments, tests & surveys.