Adding Space To a Web Page
Adding Space <ul><li>White Space is the amount of empty space on a web page, which is good for the eyes and makes reading ...
The following Tags are ways to add (White) Space: <ul><li>Line Break: <br>  isn’t a set , use to break the line without pu...
<ul><li>&nbsp: New Blank Space  – acts like the spacebar, use no  < >  & can use many together.  </li></ul><ul><li>Horizon...
Adding Comments or Notes <ul><li>When you want to add notes or comments to a section or the entire web page use this tag <...
Tags and  their Attributes <ul><li>Tags whether singles or sets will have attributes. </li></ul><ul><li>Attributes allow t...
Changing the Appearance of the Horizontal Rule <ul><li>To Change the </li></ul><ul><li>Width or Length –  </li></ul><ul><l...
Don’t Forget to Combine When Possible <ul><li><hr  width=70   align=“right”  size =30>  </li></ul>
So, What’s the  Next Step? <ul><li>Review this presentation as many times as needed. </li></ul><ul><li>Complete the Exerci...
Upcoming SlideShare
Loading in …5
×

Adding Space

254 views
214 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
254
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Adding Space

  1. 1. Adding Space To a Web Page
  2. 2. Adding Space <ul><li>White Space is the amount of empty space on a web page, which is good for the eyes and makes reading easier & better!! </li></ul><ul><li>Good Web Design allows for white space, The More The Better! </li></ul><ul><li>In Notepad, you can actually use the spacebar, return & tab keys when creating a web page. This allows you to clearly see the tags, text and the different sections. </li></ul><ul><li>BUT the web browser IGNORE all of this & everything will be as 1 long single spaced line or paragraph. </li></ul>
  3. 3. The following Tags are ways to add (White) Space: <ul><li>Line Break: <br> isn’t a set , use to break the line without putting a space between the lines, acts like a Single Space . </li></ul><ul><li>Paragraph: <p> </p> use to add space between paragraphs, acts like a Double Space . </li></ul><ul><ul><li>Use only <p> for spacing. </li></ul></ul><ul><ul><li>For alignment must use the set <p> & </p>. </li></ul></ul>
  4. 4. <ul><li>&nbsp: New Blank Space – acts like the spacebar, use no < > & can use many together. </li></ul><ul><li>Horizontal Rule: <hr> isn’t a set, adds a visible horizontal line, used to make sections. </li></ul><ul><li>You can use as many of these as needed. </li></ul><ul><li>Remember a paragraphs can be sentence, word, phrase or full paragraph. </li></ul>
  5. 5. Adding Comments or Notes <ul><li>When you want to add notes or comments to a section or the entire web page use this tag </li></ul><ul><li><!--comment--> </li></ul><ul><li>Simply replace the word comment. </li></ul><ul><li>It doesn’t show up in the browser. </li></ul><ul><li>It will help you understand the source code better. </li></ul><ul><li>Can be used anywhere in the document. </li></ul>
  6. 6. Tags and their Attributes <ul><li>Tags whether singles or sets will have attributes. </li></ul><ul><li>Attributes allow the tags to have additional features such as size, and colors. </li></ul><ul><li>These Attributes or “ Add-On ” will always go after the opening tag only and never in the closing tag , if it’s a set. </li></ul>
  7. 7. Changing the Appearance of the Horizontal Rule <ul><li>To Change the </li></ul><ul><li>Width or Length – </li></ul><ul><li><hr width=number or %> </li></ul><ul><li>Thickness or Height - </li></ul><ul><li><hr size=number> </li></ul><ul><li>Alignment – </li></ul><ul><li><hr align=”right, center or left”> </li></ul>
  8. 8. Don’t Forget to Combine When Possible <ul><li><hr width=70 align=“right” size =30> </li></ul>
  9. 9. So, What’s the Next Step? <ul><li>Review this presentation as many times as needed. </li></ul><ul><li>Complete the Exercise(s) that follows this Module. </li></ul><ul><ul><li>Don’t forget to put it in the Dropbox. </li></ul></ul><ul><li>When finished, go on to the next Module’s overview. </li></ul>

×