Hand Coding .websdiy

Lesson 4

In this lesson, we'll be coding with 2 other HTML elements:

  • Heading 2
  • Definition List
  • Replacing text

Heading 2 needs no explanation as you have coded Heading One in the last 3 exercises.

Definition List opens with <dl> and closes with </dl>, in between there is <dt></dt> for terms and <dd></dd> for data.

<dl>

<dt></dt>

<dd></dd>

</dl>

Shortcut Key Control-F and Replacing Text

The shortcut for Find is Control-F and Replace is Control-H for both in Notepad and Notepad++. You can hit Control-H, skipping the search, if you are certain the text to be replaced are in the document.

Replacing Text in Windows NotePad

In Notepad++ the Replace button is available in the option box once you press Control-F.

Replacing Text in NotePad++

How often do you use the Replace or Replace All function

  1. When you are given the a template and you need to replace example.com to yourdomain.com, use the Replace All to have the correction done instantly.
  2. If you had earlier coded some lines with <p> but decide to change to <li> instead.
  3. Many others as you will learn in later courses and those you will discover on your own as you progress.

Now we shall begin this lesson's exercise:

  1. Open up 03.websdiy.com
  2. Click Terms
  3. Select All and Copy
  4. Paste to Notepad
  5. Save as Lesson 4
  6. Now the coding begins:
    1. Assign heading 1 to the first line {TERMS OF USE}
    2. Assign heading 1 to the secong line (Websdiy's Site Agreement)
    3. And Paragraph to the next three paragraphs
    4. Type <dl> (a new line) after the third paragraph
    5. Scroll down to the bottom and type </dl> to close the definition list.
    6. Code every single sentence with <dt> except the last line (remember to close with </dt>)
    7. Code every following paragraph with <dd> including the last line (again, remember to close)
  7. That's all!

How was that without much help from me?

Now, either you key in every code manually or you apply the copy and paste to every tag is not important. The whole objective is to create a web page without the help of an HTML editor.

Are you ready for Replacing Text?

If you are using this file for your website, you'll need to replace all websdiy.com found in the document to yourdomain.com.

To do this what you need to do is to :

  1. Press Control-H
  2. Fill in the Find what and Replace with and click Replace All

This document we are doing is huge. In a large document, errors are bound to happen and sometimes difficult to detect. I'll cover this area in later lessons. But in the meantime, do this manually line by line to spot for errors.

I hope you enjoyed this lesson. If you are able to complete this on your own, you have arrived at the next level...

Believe me, you are almost there, and for some who are more familiar with HTML, you are ALREADY THERE!

I am not saying this just to encourage you. I am stating a fact...