ComputerScienceExpert

(11)

$18/per page/

About ComputerScienceExpert

Levels Tought:
Elementary,Middle School,High School,College,University,PHD

Expertise:
Applied Sciences,Calculus See all
Applied Sciences,Calculus,Chemistry,Computer Science,Environmental science,Information Systems,Science Hide all
Teaching Since: Apr 2017
Last Sign in: 103 Weeks Ago, 3 Days Ago
Questions Answered: 4870
Tutorials Posted: 4863

Education

  • MBA IT, Mater in Science and Technology
    Devry
    Jul-1996 - Jul-2000

Experience

  • Professor
    Devry University
    Mar-2010 - Oct-2016

Category > Programming Posted 23 May 2017 My Price 11.00

BSTEC 130 — Computer Fundamentals

HTML Assignment Sheet

BSTEC 130 — Computer Fundamentals
HTML Assignment Personal Home Page

GETTING STARTED – OVERVIEW


Your assignment is to use Notepad and xhtml code to create a personal home page. You may write about your hobbies and interests, your family, your education and career goals.

There are several good videos on YouTube that demonstrate how to create a web page with xhtml coding and text editor software. Notepad is the text editor that comes with the Windows operating system—you can find Notepad under Accessories in your program list. (If you are using Windows 8, use the search box to locate Notepad.)

To begin learning about creating a web page, visit the web sites and play the videos listed below. You will read about and see many elements demonstrated—your assignment will only require a few basic elements, so don’t be concerned about needing complex coding. For instance, you will only need a title inside your head tag, although there are many others you may see.

You can also do your own Google search for other resources suitable for beginners in xhtml. If you find something especially useful, share it with your classmates on the Discussion Board. Here are the places to get started:

http://www.tizag.com/htmlT/index.php (Links to an external site.) 

Although this article is dated 2001, it contains a good outline of the basic structure of a web page:

http://www.sitepoint.com/article/beginners-html-1/ (Links to an external site.)

Well organized information with an easy to use menu on the left side: 
http://www.daaq.net/old/xhtml/index.php?page=xhtml+documents&parent=xhtml+basics (Links to an external site.)


I ESPECIALLY LIKE THIS SITE FOR ITS EASE OF USE—it lists elements clearly and briefly—click on a link to see the code for specific elements, and the results of using that code:  http://www.lll.hawaii.edu/web/workshop/css/css-list.html (Links to an external site.)


VIDEOS: You may want to pause or replay parts of the videos as you watch in order to write down code for the elements you want to use.


Although the presenter moves through the information pretty fast, he explains and demonstrates xhtml in an easy-to-understand manner:
 (Links to an external site.)
This presenter has several shorter (4-7 minutes in length) sequenced demonstration videos:


 (Links to an external site.)

 (Links to an external site.)
Link (Links to an external site.)

BEGIN CREATING YOUR WEB PAGE:

  1.  Play the demonstration videos Begin An XHTML Project (Links to an external site.) andAdd A Background Image to your HTML Project (Links to an external site.) I created -- the password to view these is 130
  2. Open Notepad.
  3. Save the Notepad file: In the Save As dialog box, create a new folder for your HTML files, then save your Notepad file with the nameYOUR LAST NAME_Home_Page— Before typing the file name, notice that theSave as typeis Text Documents (.txt).
  4. Type your file name and the extension.htm. If you do not add .htm as the extension to your file name, the file will be saved as a text file and you will not be able to view it as a web page.
  5. The basic structure of your web page will contain the code below. You may copy and paste this beginning structure into your Notepad file, then add additional elements, formatting, and your content to it.

<html>
<head><title>


</title></head>
<body>

 


</body>
</html>

 

What you type between the beginning and ending <title> </title> tags will appear in the browser's TITLE BAR – for this assignment, type Your Last Name – HTML Assignment (or something similar).

All your other content will go between the beginning and ending <body> </body> tags.

Read TIPS for XHTML.pdf and List of Tags.pdf for additional important information about this assignment.

To earn FULL CREDIT on this assignment, attractively incorporate all of the following elements into your page. 
Make a note of the codes as you read or see them demonstrated.

  • Two different heading styles 
  • Change font style, size, and color
  • Center align some text 
  • Create a paragraph 
  • Insert a horizontal rule (a line) 
  • Use bold and italic formatting on some text 
  • Use an ordered or unordered list -- minimum 3 items per list -- see code below
  • Add a background image to your document (watch my video) 
  • Add a photo or clip art to your document. Use a personal photo or do a Google search for free clip art to use.

 

IMPORTANT HTML FILE MANAGEMENT INFORMATION

Any photo, clip art, or background image you use must be saved to your HTML Assignment folder. When you find an image you want to use, right-click on the file name, select Save Picture As. . .then save it to your folder.

Your Notepad file and images files must all be contained in the same folder. When you are ready to submit your assignment, zip (compress) the HTML Assignment folder, and submit the zipped folder to Blackboard.


If you do not follow these instructions, I will not be able to view your background and picture images. The code for a background or other image is a pointer to the image—not the image itself. The images must be in the folder with the .htm file. You must compress (zip) and submit the entire folder: Right-click on your html folder. . .go to Send To. . .Compressed (zipped) folder.

 

Some sources for background images:

  •  webmonkey.com
  •  http://webclipart.about.com/od/backgroundsoriginal/Backgrounds_and_Borders_Clip_Art.htm
  •  http://wp.netscape.com/assist/net_sites/bg/backgrounds.html
  •  allfreebackgrounds.com

 

ADDING IMAGES TO YOUR PAGE:

  • ReadIMPORTANT HTML FILE MANAGEMENT INFORMATIONabove.
  • You must save your picture inside your html folder.
  • The code to use the picture is below; “img src” stands for “image source”—you are telling the computer where to find the picture to display. Be sure to spell “src” correctly—a common typo is “scr” which won’t work!
  • Use the correct image extension—it will likely be one of these common extensions-- .jpg or .gif.

<img src="/nameofyourimagefile.jpg">


CREATE AN UNORDERED LIST or AN ORDERED LIST:

Use an unordered list or a table to tell me something about you. An unordered list is a bulleted list; here are the tags:


<ul>
<li> your text here </li>
<li> your text here </li>
<li> your text here </li>
</ul>


You could also use an ordered (numbered) list instead—the tags are the same except <ul> and </ul> are <ol> and </ol>.

 

EXTRA CREDIT OPPORTUNITY:

  • Add additional elements, such as a hyperlink, a table, an image border, a marquee, add color and width to your horizontal line
  • Earn 1 point per additional element up to a maximum of 5 points
  • If you choose this extra credit option, in the comments area of Canvas when you submit your folder, you MUST identify what elements you added for the extra credit.

 

COMMON XHTML TAGSHEADINGSTYLESHeadings are an important part of any document, not only because theymake a page easier to read but also because they split a page up intosections with varying degrees of importance. Think about when you reada newspaper, the bigger the headline, the more important the story is!In XHTML there are six different heading styles. Heading 1 is the mostimportant, and heading 6 is the least important. In general, we tend onlyto use headings 1, 2 and 3 as most documents have little need for theother subsections. The diagram to the left shows a example of the sixheading styles.The example below shows how the diagram was produced. Note that there are no line breaks specifiedin the code; headings start on a new line automatically.<h1>Heading 1</h1><h2>Heading 2</h2><h3>Heading 3</h3><h4>Heading 4</h4><h5>Heading 5</h5><h6>Heading 6</h6>ALIGNMENTTAGSYou can align HTML elements to the left, right, or center:<h3 align="left">Aligned left</h3><h3 align="center">Aligned center</h3><h3 align="right">Aligned right</h3>This results:Aligned leftAligned centerAligned rightBOLDYou specify bold text with the <b> tag.Typing this code:<b>This text is bold.</b>Results in this:This text is bold.

Tips for working with HTML:Working with html files requires reading carefully and paying close attention to detail. You will do yourwork in Notepad and review the document in the browser. It's important to follow the steps closely! Ifwhat you've done doesn't appear correctly in the browser, go back to Notepad and proofread yourwork--the tiniest error in code will change the results.Having said that, I hope your will enjoy the XHTML project! It is quite exciting to see what you can createwith just a little bit of coding knowledge.Here are some tips that will be important to you as you work:In my notes and videos, I use html and xhtml interchangeably to refer to the same thing.When a reference refers to a text editor, it meansNotepad. Notepad is a Windows accessory and isfound underPrograms, Accessories.When working on your document, keep both the text editor (Notepad) and browser (InternetExplorer) open--then you move easily from one to the other using the buttons on the Task Bar.You have only one web page file, with the extension .htm. Youviewit in 2 different ways – inNotepad (where you create and code the contents) and in the browser (where you see it as it wouldappear on the Internet)You must save your file in Notepad with the.htmextension.To open your file in the browser:**Open the browser; go toFile. . .Open; click theBrowsebutton; locate your file wherever yousaved it.**OR--you can open the browser and drag your .htm file to it.Be sure toSavechanges you make in Notepad; thenRefreshin the browser to see the changes.VIDEO CLARIFICATION:In my second video, where I show you how to add a background image toyour web page, I mention that you can go toView. . .Sourcein the browser and make edits there.That is no longer true. To work on your web page code, openNotepad, then go toFile. . .Openandopen your .htm file.VERY IMPORTANT:If you close your Notepad file and then want to re-open it, open Notepad, go to File. . .Open, then besure to chooseAll Filesfrom the drop down list--you won't see your html file if type of files displaysText Documents (*txt).Type carefully! Always read you code carefully to be sure you have beginning and ending bracketsand that everything is spelled correctly. Here are two common typing errors:img scrinstead ofimgsrc;backroundinstead ofbackground.One of the videos on YouTube demonstrates a more feature-rich Notepad software (Notepad++)which is a free download. Regular Notepad works fine, but if you’re interested in Notepad++, visitthis web site for information and download:http://www.download.com/Notepad-/3000-2352_4-10327521.html

Attachments:

Answers

ComputerScienceExpert
(11)
Status NEW Posted 23 May 2017 12:05 AM My Price 11.00

-----------

Attachments

file 1495499942-Solutions file 2.docx preview (51 words )
H-----------ell-----------o S-----------ir/-----------Mad-----------am ----------- Th-----------ank----------- yo-----------u f-----------or -----------you-----------r i-----------nte-----------res-----------t a-----------nd -----------buy-----------ing----------- my----------- po-----------ste-----------d s-----------olu-----------tio-----------n. -----------Ple-----------ase----------- pi-----------ng -----------me -----------on -----------cha-----------t I----------- am----------- on-----------lin-----------e o-----------r i-----------nbo-----------x m-----------e a----------- me-----------ssa-----------ge -----------I w-----------ill----------- be----------- qu-----------ick-----------ly -----------onl-----------ine----------- an-----------d g-----------ive----------- yo-----------u e-----------xac-----------t f-----------ile----------- an-----------d t-----------he -----------sam-----------e f-----------ile----------- is----------- al-----------so -----------sen-----------t t-----------o y-----------our----------- em-----------ail----------- th-----------at -----------is -----------reg-----------ist-----------ere-----------d o-----------n -----------THI-----------S W-----------EBS-----------ITE-----------. ----------- Th-----------ank----------- yo-----------u -----------
Not Rated(0)