www.cassiaschools.org

Work TogetherProject 2, Creating & Editing a Web Page Using Inline StylesStarting Notepad++Use the path below:c: program files/notepad++/notepad++If not maximized, maximize the Notepad++ window.Enable word wrap by clicking on view and making sure that the word wrap option is clicked.Enter the HTML code listed below to define the web page structure.LineHTML Tag and Text<!DOCTYPE HTML>Leave this line blank<html><head><meta charset=”utf-8” /><title>Rock climbing Fun, put your first and last name here</title></head>Leave this line blank<body>Leave this line blank</body></html>Entering Web Page content (as content for a particular line changes, do not delete content previously on that line, just let it move to a lower line). As you type the paragraph of text below you should NOT press the <enter> key as word wrap will wrap the text around naturally.LineHTML Tag and Text <section><article> <p>Rock climbing fun has recently opened a school at the base of Mount Rainier. We have programs for advanced rock climbers as well as for beginners. Rock climbing is a widely popular sport, especially in the state of Washington. Classes run from early morning to mid-afternoon, and private climbing lessons are available. Come join our classes and experience the fun and great exercise that rock climbing can provide. Call 1-800-555-CLIMB for more information. </p>Leave this line blankIV.Enter a Heading – This will be a heading that will separate the paragraph of text from the bulleted list. You will use a <h2> heading because it is not really the main heading of the page.LineHTML Tag and Text15<h2>Equipment needed to get started :</h2>Create Unordered List – To highlight what web site visitors will need for equipment when taking a class with Rock Climbing Fun you will create a bulleted (unordered) list using the HTML tags and text shown below. Note: when you get to lines 18, 19, 20, 22, and 23, press the tab key before typing if they do not automatically indent.LineHTML Tag and Text16leave this line blank17<ul>18 <li>Comfortable climbing shoes</li>19 <li>Backpack</li>20 <li>Harness</li>21</ul>22</article>23</section>24leave this line blank25leave this line blankAdding a Footer – As mentioned in the notes for this project, HTML5 introduced several new structural elements that help to enhance the layout of a web page. One of these is the footer.LineHTML Tag and Text25<footer>26 Rock Climbing Fun, 3737 Harrison Lane, Issawak, WA 9800027</footer>Save an HTML File – As I’m sure you have heard before, Save Often, Save Often.Click on File, Save AsMake sure to change to your personal file location. Go into the Chapter02 folder and then into the ChapterFiles folder. The path will be Chapter02/ChapterFiles/rockclimbing.htmlType rockclimbing.htmlClick the save buttonUsing a Browser to View Your Web PageLeaving Notepad++ open in case you decide to make some changes.Open windows explorerFind the file you just saved and double-click on that file. It will open in the default browser window.Adding an Image – Two of the important issues with images are location and size. (1) the image you are inserting must be in the same folder as where the HTML file is saved. If not you must make sure to type in the entire path to the image. We will talk more about this later. (2) make sure that you have optimized the image for the web. Viewers will get tired of waiting if it takes a long time to load and may not look at your page at all.LineHTML Tag and Text11<header style=”text-align: center”>12 <img src=”rockclimber.jpg” width=”450” height=”300” alt=”Rock climber” />13</header>14leave this line blankAdding Color to the Web Page and Changing the Bulleted List StyleClick after the “2” but before the closing bracket in <h2> on line 19 and then press the SPACEBAR.Type style=”color: #384738” as the color code for the heading.Click after the “I” but before the closing bracket in <ul> on line 21 and then press the SPACEBAR.Type style=”list-style-type: square” as the code.Add a Horizontal Rule and Change the Footer StyleClick the blank line 28 and then press the ENTER key.Type <hr style=”height: 8px; background-color: #384738; width: 50%” />Click after the “r” but before the closing bracket in <footer> on line 31 and then press the SPACEBARType style=”text-align: center; font-style: italic” as the code.Click file, saveValidate and View HTML CodeIn your browser go to validator.Click the Validate by File Upload tabClick the Browse button; locate your rockclimbing.htm file in the Chapter02/ChapterFiles folder.Click the open button on the choose file to upload dialog box and the file path and name will be inserted into the file box.Click the check button. The resulting validation should be displayed.Return to NotePad++ and your .html file. If you are using Internet Explorer you may also view the source file (html) by clicking view, source. Changes may also be made to the source code from here.Print a Web PageIf you want to see the page as a finished page you must print from the browser.To print the code of a webpage you would print from NotePad++ ................
................

In order to avoid copyright disputes, this page is only a partial summary.

To fulfill the demand for quickly locating and searching documents.

It is intelligent file search solution for home and business.

Literature Lottery

To fulfill the demand for quickly locating and searching documents.

Related download

Related searches