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
- 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 https://www.bville.org/main2.css. This 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.
- 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>
- 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.
- Now go to the directory and right click on the Practice.htm file. Select Open in Notepad.
- 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:
Every
<span style=”color:yellow;background-color:red;”>
good boy
</span>
does fine.
</p>
Every good boy does fine. (Example 2)
Guided practice:
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 good boy does 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;"> </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:
- Try changing the background to red, the font-size to 11 and the decoration to italic.
- 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:
Every
<span style=”color:yellow;background-color:red;”>
good boy
</span>
does fine.
</p>
Every good boy does fine. (Example 2)
Guided practice:
- What is the difference between an in-line and a block element?
- Use the span selector to change the background color of fine to green and the font color to black.
- 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 ( ). In the next section of the web page I have taken the original statement and increased the spacing in the HTML:
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 good boy does 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;"> </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:
- 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.
