Skip to main content
district home
click for schooltool click for twitter click for facebook click for instagram Register click for Stop Bullying Lunch Menus

Webmaster Workshop
Originally presented Spring, 2014



Mike Foster
Baker HS Webmaster

Goal:  Most web page management for the Baldwinsville CSD website is done by an on-line program (tempEDIT) which allows the user to enter information and formatting directly into an editor.  The program then generates the required HTML source code to display the information as it was formatted by the user.  However, in some cases, limitations in tempEDIT make it difficult to achieve the desired format using the editor.  In those cases, the desired format can often be achieved by directly editing the source code.  The purpose of this workshop is to provide users with information on how the source code can be interpreted and edited to produce the desired effects.

Definitions:

  • HTML ( HyperText Markup Language) – a set of formatting instructions that are interpreted by the computer but not shown on the web page.  Examples of these tags would be:
    • <br/> (line break) – generates a new line
    • <font> - determines font type, size, weight
    • <table> <tr><th> <td> - identifies a table, table header, table row, table data cell
    • <a href=”……….”> - identifies a link to another web page
Note: most tags must be followed by a closing tag which terminates the instruction:</font></table> </tr> </td> </a>
  • CSS (Cascading Style Sheets) – styles determine how to display an HTML element.  They were developed to increase the formatting options in HTML. 
  • CSS Methods
    • Linked – Styles can be identified for multiple web pages with a single set of instructions.  In the case of the Baldwinsville website, this web page can be found at http://www.bville.org/main2.cssThis page can NOT be edited by webmasters.
    • Embedded – Styles that are used multiple times in the same web page can be embedded in the head section of a web page.  This eliminates the need to redefine the style of an element each time it is used.  Webmasters do NOT have the ability to edit the embedded styles in Baldwinsville web pages.
    • In-line – It is possible to change the style of a particular element in a web page by editing its HTML tag.  These in-line styles CAN be modified by webmasters and increases the formatting options available to them on a web page.
    • Cascading refers to the fact that the different methods are activated in a particular order.  Link styles can be overridden by embedded styles, which can be overridden by in-line styles.  Thus, changing in-line styles by using an in-line style gives a lot of flexibility in formatting a page.


 

This workshop will utilize a web page that you create to demonstrate some of the CSS concepts that I feel are important for Baldwinsville webmasters. 

  1. First copy the following html code, open a new file in Notepad and paste the code into the web page.  Save the file as Practice.htm. (Make sure the file extension is .htm and NOT .txt) in your directory.
    <!DOCTYPE html>
    <html>
    <body>
    <p>Example 1 </p>
    <!-- Comment 1 - This section shows how CSS in-line styles can be use to change the values of the paragraph selector. -->
    <p style="color:red;background-color:yellow;font-size:24px;text-decoration:underline">
    Every good boy does fine. 
    </p >
    </body>
    </html>
    
  2. Go to the directory and left click on the file you just created (as you would to open any file).  This will open the web page you just created.
  3. Now go to the directory and right click on the Practice.htm file.  Select Open in Notepad.
  4. You can now make modifications in the source code file in Notepad, save them, and view the results by reloading the web page (right click and select reload).
Guided practice:
  1. Try changing the background to red, the font-size to 11 and the decoration to italic.
  2. How would you change the text color to yellow?
 
 
  • You also need to Recognize the difference between Inline and block selectors:
    • Block selectors start a new line when displayed in a browser (ex. <h> <div> <p>  <table> <ul> <li>
    • Inline selectors do not cause a new line to be displayed. (ex: <span> <a> <td> <img> <b>
    • One of the most useful source code tags for a web master is the line break selector (<br/>) .  This selector generates a new line when it is encountered.  Most selectors require an end tag at the conclusion of a rule (examples: </p> </div>,</table>.  The line break selector requires no closing tag.
    • The <span> selector is a very useful in emphasizing text.  For instance, if we take the source code above and wish to emphasize the word good, we could use the following:
<p  style=”background:yellow;color:red;font-size:16px;text-decoration:underline;”>
Every
 <span style=”color:yellow;background-color:red;”>
good boy
</span>
does fine.
</p>
Every good boy does fine.  (Example 2)

Guided practice:
  1.  What is the difference between an in-line and a block element?
  2. Use the span selector to change the background color of fine to green and the font color to black.
  3. How would you get a display where every word is on a separate line?  (Two ways!)
 
 
  • Controlling line spacing – one of the difficulties often encountered in web page design is that HTML typically only recognizes one space between two words.  This can often be overcome by the use of the ASCI code for a non-breaking space (&nbsp;).  In the next section of the web page I have taken the original statement and increased the spacing in the HTML:
<p  style=” color:red;background:yellow; font-size:16px;text-decoration:underline;”>
Every        good           boy       does          fine.
</p>
However, when this is displayed, the extra spaces are ignored by the computer and the display is exactly the same as it was without the additional spacing:
Every good boy does fine.
The wider spacing can be achieved by placing the code for the non-breaking spaces in the source code:
p  style=” color:red;background:yellow; font-size:16px;text-decoration:underline;”>

Every &nbsp;&nbsp;       good &nbsp;&nbsp;         boy  &nbsp;&nbsp;             does  &nbsp;&nbsp;               fine.
</p>
Every   good    boy    does    fine. (
 
The non-breaking space code can also be used in conjunction with paragraph tags to add additional blank lines to a web page.
                              <p style="font-size:40px;"> &nbsp; </p>
By coupling the non-breaking space with the paragraph tag, I was able to generate a blank line.The height of the blank line can then be controlled by changing the font-size value for the paragraph.

Guided practice:
  1.  In the source code, try changing the value of the text-size attribute in the paragraph selector from 40px to 20px.  Then to 80px. 
 
  • Using Comment tags – HTML uses comment tags to allow users to place labels and instructions in a web page that are useful to the web page author, but are not displayed.
Using HTML and CSS allows web page designers to construct pages that are interesting and attractive.  This article barely scratches the surface of what can be done.  However, much more detailed tutorials are available on-line for anyone that is interested.
 
Downloads
Last updated on 10/27/2016
District Departments Staff Resources Schools Parents & Students Community
Baldwinsville Central School District | 29 East Oneida Street | Baldwinsville, NY 13027 | Phone: 315.638.6043 report bullying
Developed by CNYRIC