jan mccleery, december 2014 - dbwgc.files.wordpress.com...dbwgc 1 website guide - 2020 1 dbwgc’s...

DBWGC

Jan McCleery, December 2014 Last updated March 2020

Webmaster Technical Guide and HTML 101

DBWGC Website Technical Guide and HTML 101


Table of Contents

1 DBWGC’s WordPress Site ...................................................................................... 1 1.1 Site Overview................................................................................................................................................ 1 1.2 WordPress Account ................................................................................................................................... 1

2 Updating Pages (What Page and When) ................................................................ 2 2.1 Club Info .......................................................................................................................................................... 2 2.2 Officer Page ................................................................................................................................................... 2 2.3 Champions Page .......................................................................................................................................... 4 2.4 Most Improved Golfer Page .................................................................................................................... 6 2.5 MHS Info ......................................................................................................................................................... 8 2.6 Events Page ................................................................................................................................................... 9 2.7 Captains Club ............................................................................................................................................. 10

3 Adding a Post via the Dashboard ........................................................................ 10 3.1 Adding a New Post .................................................................................................................................. 10 3.2 Post Categories ......................................................................................................................................... 11 3.3 Option – Change the Author ................................................................................................................ 11 3.4 Option – Change the Date Published ............................................................................................... 12 3.5 Save the Post .............................................................................................................................................. 12

4 Page and Post Formatting Basics ......................................................................... 12 4.1 New WordPress Block Editor ............................................................................................................. 12 4.2 Font Style ..................................................................................................................................................... 13 4.3 Lists ................................................................................................................................................................ 14 4.4 Line Breaks <BR /> ................................................................................................................................. 16 4.5 Uploading Media Directly from a Post or Page ........................................................................... 16

4.5.1 Adding Hyperlinks ............................................................................................................................... 17

5 Additional Webmaster Info ................................................................................ 17 5.1 Changing the Layout/Menus .............................................................................................................. 17

5.1.1 Menu ......................................................................................................................................................... 18 5.1.2 Menu Structure..................................................................................................................................... 18 5.1.3 Nav Bar based on the Menu............................................................................................................. 18 5.1.4 Other Layout Website Changes ...................................................................................................... 19

5.2 Maintaining the Domain (URL – www.dbwgc.com) ................................................................. 19 5.3 Adding new Users .................................................................................................................................... 20 5.4 New Posts via Email ............................................................................................................................... 20 5.5 Receiving Email when New Posts are Made ................................................................................ 21 5.6 Managing Comments .............................................................................................................................. 21 5.7 Managing Blog Categories .................................................................................................................... 22

6 HTML 101 ........................................................................................................... 25 6.1 Basic Formatting ...................................................................................................................................... 25

6.1.1 <font size="3"> </font> .................................................................................................................... 25


6.1.2 <font color="red"> </font> ............................................................................................................. 26 6.1.3 Line Break <BR \> ............................................................................................................................... 26 6.1.4 Spacing “ ” ................................................................................................................................. 26 6.1.5 Headers <H3> </H3> ......................................................................................................................... 26

6.2 Multi-Level Lists ....................................................................................................................................... 27 6.3 Advanced Hyperlinks <a href> .......................................................................................................... 28 6.4 Advanced Options for Images (Media) <img> ............................................................................ 29 6.5 Advanced HTML - Tables ..................................................................................................................... 31

6.5.1 Table align=”left”, “right”, “center” .............................................................................................. 32 6.5.2 width=”n” ................................................................................................................................................ 32 6.5.3 Spanning Columns .............................................................................................................................. 32 6.5.4 <tbody> … </tbody> Tags ................................................................................................................ 33

DBWGC 1 Website Guide - 2020

1 DBWGC’s WordPress Site

WordPress is a free website creation tool, probably the easiest and most powerful blogging and website content management system in existence today. We use it to host our website and blog.

The site is accessible via http://www.dbwgc.com or http://www.dbwgc.wordpress.com.

1.1 Site Overview

On the DBWGC site there are 7 tabs: The Blog page plus six (6) static pages:

1. Home 2. Club Info 3. Officers 4. Champions 5. Most Improved 6. MHS (Maximum Hole Score) Info 7. Events 8. Captains Club

The Home page is the first page users go to when accessing the site. The Home page is a special WordPress page which keeps everything posted to it available. The “Posts” are managed by WordPress. The other pages are static WordPress “Pages.”

In addition to Posts and Pages, there is information available on the right side of the screen like the Calendar and Roster links, latest Board and Genera Meeting Minutes, Bylaws and the Tournament Regulations & Standing Rules, and links to other sites and for more information.

1.2 WordPress Account

If you don’t have a WordPress Account go to http://www.wordpress.com/admin and create a WordPress login and password. WordPress will remember you so you can later

http://www.dbwgc.com/

http://www.dbwgc.wordpress.com/

http://www.wordpress.com/admin


just go to our website and the Dashboard will be available. Then ask the DBWGC Webmaster to add you as an Admin to the DBWGC site.

If you are the new Webmaster for the year, ask the prior Webmaster to make sure you get set up.

To see the list of DBWGC regular Webmaster Duties, see the “DBWGC Website Basics Guide.” This guide is for the more technical aspects of the site, and items that mainly are changed once a year at most.

2 Updating Pages (What Page and When)

Small changes may need to be made if, for example, a new Golf Pro is hired or officer changes mid-year. Or on the “Events” page we periodically remove old events and add new ones.

Once a year we need to update the Officers, the Club Champions, or other pages plus update any pages that display the current year.

For major change is needed, see section HTML 101.

To begin, go to the WordPress Admin screen: dbwgc.com/wp-admin

The rest need only a yearly update plus Champions can be updated when the Spring Handicap Net winner is announced.

For each page, more details about what to update and when is in Section 3. “Updating Pages (What Page and When)”.

2.1 Club Info

Club Info – Only needs to be updated if a pro comes/goes

2.2 Officer Page

WHEN: Yearly or if an officer changes position

TO DO: To update the Officer page, we copy the entire table, paste it above and then just edit the contents. There’s no table structure changes needed.

(1) Move the current year’s table down below the “Past Captains” list. To do that, place your cursor before the first <table …> row and highlight from there to the end of the table (</table>).


(2) Paste what you just copied above the prior years’ officers table:

(3) Update the Past Captain’s List – First copy the top captain’s name and paste to create the new row.


(4) Then update the new top row with the past year’s captain and year.

(5) Then go back to the top and update the Year (top row) and Board/Committee names.

(6) “Preview” Changes

(7) “Update” if the Preview looks good

2.3 Champions Page

WHEN: At the Net (Spring) and Champion (Fall) are announced.

TO DO: Add new row at the top (under the column heading row) for the Net champion.

1. Highlight the current year’s row


2. Copy/Paste to create a new row for this year

(Note: The extra spaces/tab padding is not used by WordPress – it’s there for readability only and/or came in from a copy/paste. At times WordPress strips them or puts each <td> xxx </td> on it’s own line – no worries).

3. Edit date and names for Low Net. Remove name for Champion.

4. “Preview” Changes

5. If OK, “Update”

6. After Champion is announced (Fall), add her name in (on same line).




2.4 Most Improved Golfer Page

WHEN: At the end of the year

TO DO: Add a new row at the top (under the heading row) for this year’s Most Improved.

1. Highlight the current year’s row

2. Copy/Paste to create a new row for this year

3. Edit name/date


2.5 MHS Info

This used to be our “ESC Info” page but was updated for the new World Handicap System’s Maximum Hole Score (MHS) information for 2020.


2.6 Events Page

WHEN: At the beginning of the year this should be updated with the date/events for the year. (It’s set up now for 2015 Events to be added).

TO DO: It’s up to the webmaster(s) how much time and effort to put here. You can post pictures, announcements, more information, etc. or keep it static during the year as simply a quick reference.


2.7 Captains Club

The Captains Club is new in 2019. There was one meeting/luncheon. Photos were posted on this page. It should be added to if other events occur. (Recommend putting the latest report on the top).

3 Adding a Post via the Dashboard

The webmaster can also add a post directly using the dashboard Post -> Add New. This would be if there is special information to communicate that had not been distributed via email.

3.1 Adding a New Post

To Add a new Post, simply click the “Add Post” button or Post -> Add from the Dashboard.


(Note: There are two versions of the WordPress Editor – above is shown the new version. Both have the same/similar functions. You can pick which one you like the best.)

Then for a simple post, just type away.

3.2 Post Categories

New posts default to “Play Day Results”. Therefore, any other posts need the category changed, such as to “Rules of Golf”.

Identify the Category(ies) on the right. These help the women find the old posts they are interested in.

Click the “Preview Changes” button to view the post before it is published.

3.3 Option – Change the Author

The author of the post can be changed to someone else who Is on the DBWGC users list. For example, Hilary has a WordPress account, so anything about Rules of Golf or Hilary’s Stories can get attributed to her.


The author selector is halfway down in the middle section of the Edit Post page:

3.4 Option – Change the Date Published

Clicking “Edit” next to “Publish Immediately” lets you change the publication date.

3.5 Save the Post

Once satisfied, click “Update”.

4 Page and Post Formatting Basics

4.1 New WordPress Block Editor

There is a new “Block Editor.” It may be worth trying out.


This document covers the “Classic Editor.”

4.2 Font Style

Highlight the word and click the button.

Note what happens is that it wraps the word(s) with <strong>…</strong> for bold or <em>…</em> for italics or “emphasis”. Click Preview to view the results:


Other formatting buttons include b-quote (block quotes) which does a nice indented block of text preceded by a large quote symbol.

4.3 Lists

Now I want to add a bulleted list of items:

• One

• Two

• Three

To do that, first highlight the entire list:

Then click the “ul” button (Unordered List). That wraps the full list with <ul> … </ul> or, in other words, says this is a list so we will indent it and at the end shift back to the margin.

Then highlight each item on the list and click the “li” (List Item) button. That adds the <li> before and </li> after each item. It also adds a blank line and some format spaces for readability:


It’s sometimes easier to just type the <li> … </li> around each item when you are typing in your information.

Result:

If you use the “ol” button or add <ol> … </ol> instead of ul (Ordered List) you get a numbered list as shown below:


4.4 Line Breaks <BR />

Usually when you are adding a post via the Add Post screen, if you enter a carriage return (enter/Return) it will insert a break between the paragraphs.

Sometimes it does not add the spacing you would like. To force a line break use the command: <BR />. This tag does not have a closing tag (it’s all inclusive).

4.5 Uploading Media Directly from a Post or Page

To insert an image, click the “Add Media” link.

On that page, you can either add a file you previously uploaded:

or a new file by clicking “Upload Files” which takes you to the Upload File screen.

Either way if you click “Insert into page”, the image link will be inserted.


4.5.1 Adding Hyperlinks

If you want to add a link to a file embedded in your post or page, click the “Add Media” link and select the file. You can upload the file there or, if it was previously uploaded, just select it. That will add the hyperlink text into your post – for example, the golf calendar file:

<a href="https://dbwgc.files.wordpress.com/2014/08/golfcalendar2014-dbwgc.pdf">GolfCalendar2014 DBWGC</a>

5 Additional Webmaster Info

5.1 Changing the Layout/Menus

The menus have already been set up to define the pages and navigation.

Go to Appearance -> Menus.


5.1.1 Menu

5.1.2 Menu Structure

5.1.3 Nav Bar based on the Menu

If you wanted to re-organize, add another page to the menu or remove one, you’d do it here. Before you could add a page though you’d need to create it See “Pages” below.


5.1.4 Other Layout Website Changes

You can do more restructuring, change the theme, banner, etc. using WordPress. For more information refer to the on-line WordPress Support Forum en.support.wordpress.com.

5.2 Maintaining the Domain (URL – www.dbwgc.com)

There are two ways to go to our blog. Users can either type our URL, www.dbwgc.com, or go directly to the WordPress page via www.dwgc.wordpress.com. (Note: If ever the URL payment (for www.dbwgc.com) doesn’t get made and access is shut off, you can always get to the site from the WordPress link while the URL payment is being updated. The notification of update goes to Jan McCleery who pays for it and gets reimbursed from the Treasurer. $18/year.)



http://www.dwgc.wordpress.com/


5.3 Adding new Users

Webmasters can be added or managed by clicking Users on the left panel.

To add a new user, click “Invite New”. If the user doesn’t already have a WordPress login, put their Email address in and they will be sent a message with how to sign up for a WordPress login.

The same WordPress username can be used to access and manage any WordPress blog (i.e., in case you manage more than one site).

5.4 New Posts via Email

Users can post via email by sending to [email protected]. You can find the email address under “My Blogs” on the Dashboard.

mailto:[email protected]


5.5 Receiving Email when New Posts are Made

Webmasters should be set up to receive an email when new posts are made (in case anything gets posted to the site we don’t want) and also to verify email updates look right when posted.

Under Settings/Email Post Changes:

5.6 Managing Comments

We periodically receive comments. Some are from our ladies but others are random. Some have link backs to their own sites.


Administrators will receive an email when a comment is submitted to the site.

Recommend only posting comments from our group or related (e.g., WGANC members, other golfers) else trash the comments as Spam.

When you mouse over a comment, the options show up: “Approve” (or “Unapprove” if previously approved”), “Spam” (to mark as Spam for future filtering) or simply “Trash”.

5.7 Managing Blog Categories

The list of Blog Categories is managed from the dashboard Posts -> Categories link:

The current categories are:


• Hilary’s Stories

• Humor

• Meeting Minutes

• News & Updates

• Play Day Results (default)

• Rules of Golf

• Team Play

− Team Play CV

− Team Play Diablo

You can add new Categories or change existing ones (via Edit which shows up when you mouse-over the category on the right).

These show up in the right panel to help users search for old posts.


Below the list of “Recent Posts” is also the list by month and users can also search by month/year.


6 HTML 101

HTML (HyperText Markup Language) is the basic language of the World Wide Web. As languages go, it’s probably the easiest one you’ll ever learn. Its roots are English, its vocabulary is made up of basic mnemonic abbreviations.

The idea is to embed coded tags in text that describe the elements of a document: headings, paragraphs, lists, pictures, tables and so on. These tags are identified by starting and ending with “<” “>”.

WordPress will take care of the basic HTML formatting while you go. But if the layout doesn’t look just like you want it to, having some basic HTML knowledge can help you quickly fix it up.

For our site, we need to know very little HTML. You will need to use HTML mainly to:

1. Update the basic page information (Officers, etc.) at the start of the year 2. Correct any automatic submissions via email (color font isn’t always “red”

from Hilary’s golf rules, pictures sometimes don’t get uploaded correctly, tabular data from Tournament Committee may not post neatly).

3. Update the right-hand panel (add Minutes, new Roster)

6.1 Basic Formatting

As we said, HTML tags are identified by starting and ending with “<” “>”. There are two ways to make text bold: <B> or <strong> (strong is the newer way to do it). HTML is case-insensitive so you could also use <b> or <STRONG>.

Also HTML does not look at embedded extra spaces or tabs. To format into columns, we need tables or other format. More on tables is later in this doc.

“Proper” HTML practice is to start the formatting with the tag and end it with a closed tag: “<\...>”. For example, if we wanted the sentence: “I am very concerned…”, in HTML we’d put “I am <B>very</B>concerned…” or “I am <strong>very</strong>concerned…”

If you leave the ending “<\...>” tag out, usually it will work fine but not always. Therefore it’s safer to practice using both the starting and ending symbol.

6.1.1 <font size="3"> </font>

The standard font size is 2. To make font larger, use a larger font size. To return to the standard size add either </font> or <font size=”2”>.


6.1.2 <font color="red"> </font>

The standard font color is black. To make font red, use <font color=”red”>. (Be sure to end with </font> or another <font color=”black”> or the rest of your page including the side panel will be red There are other colors that work like “navy” – not all colors are supported.

There are 8-character codes to represent all nuances of colors. Jan can help you with other colors.

6.1.3 Line Break <BR \>

This command can be used to add a line break (extra line) between paragraphs. This tag requires no terminator tag.

6.1.4 Spacing “ ”

There is a character string you may see In HTML. It’s handy if you want more spaces (more than one) since otherwise spaces more than one are ignored. For example, if we want to explicitly add more than one space, we use the special space“character”: (starts with an “&”, ends with a “;” – letters for non-breaking space). We use it

6.1.5 Headers <H3> </H3>

Header tags format lines used as headers/titles. For unknown reasons, <H1> doesn’t show up in our site. Our pages use <H3> to separate information. Here is what the top 5 look like:


6.2 Multi-Level Lists

You can embed a list in another list. One easy way is:

I want to add an embedded list of items: <ul> <li>One</li> <li>Two</li> <li>Three</li> <ul> <li>Three(a)</li> <li>Three(b)</li> </ul> </ul>

Result:


Note: Our Theme doesn’t seem to handle dashed lists or embedded numbers/a,b,c. As you can see, bullets do work though.

6.3 Advanced Hyperlinks <a href>

Note that our WordPress theme doesn’t underline links.

I personally like them underlined. To underline add <u> and </u> around the name:

<a href="https://dbwgc.files.wordpress.com/2014/08/golfcalendar2014-dbwgc.pdf"><u>GolfCalendar2014 DBWGC</u></a>

That makes it stand out:

If you want the user to open a new tab for the link (instead of leaving your main DBWGC page), add target=”_blank” inside the <a href=… > tag

<a href=”https://dbwgc.files.wordpress.com/2014/08/golfcalendar2014-dbwgc.pdf” target=”_blank”><u>GolfCalendar2014 DBWGC</u></a>


6.4 Advanced Options for Images (Media) <img>

We saw earlier if we were editing a post or page and clicked the “Add Media” button and selected an image to add, it was added.

The actual commands WordPress added for Cathy Houston’s photo are:

[caption id="attachment_1258" align="alignnone" width="225"]<a href="https://dbwgc.files.wordpress.com/2014/10/photo-1-2.jpg"><img src="https://dbwgc.files.wordpress.com/2014/10/photo-1-2.jpg?w=225" alt="photo 1 2" width="225" height="300" class="size-medium wp-image-1258" /></a> photo 1 2[/caption]

There are three pieces here:

• The caption (displayed below the picture) “photo 1 2”

• A hyperlink (I don’t know why this is there – it is an extraneous, unnecessary link)

• The image itself <img src=”…” …>

I usually remove the link just because it’s messy and unnecessary – I remove:

“<a href=”https://dbwgc.files.wordpress.com/2014/10/photo-1-2.jpg>” and the end tag: “</a>”.

The image itself is added via the tags <img src=”…>. There is no ending </img> tag.

The basic command (all you really need) is:

<img src=”filename”>. In our example, the basic command would be:

<img src=”https://dbwgc.files.wordpress.com/2014/10/photo-1-2.jpg”>

This produces a default-width picture. If it is a high-quality picture it will span the entire area.


Within the <img …> is

• src=” … “ - URL to the file where the image is stored. WordPress tacks on “?w=225” where 225 is the width. We don’t need those extra characters.

• alt=”…” – this is what is displayed if the user mouses over and is used by systems for the blind that read the alt message since they cannot see the image itself.

• width=”…” – width in pixels

• height=”…” – height in pixels

• class=”…” – an html class. This isn’t actually necessary to display properly.

<img src="https://dbwgc.files.wordpress.com/2014/10/photo-1-2.jpg?w=225" alt="photo 1 2" width="225" height="300" class="size-medium wp-image-1258" />

Often we want to resize the images. Currently the image is specifically sized as 225x300 (these refer to pixels). This information is redundant in several places (tacked on to the filename and in the class=”…” (both with strikeout above).

I usually pick one variable to change (width OR height) and work with it. If I wanted it bigger than “225” but not full width, I’d try width=”300”:

<img src="https://dbwgc.files.wordpress.com/2014/10/photo-1-2.jpg" width="300">


If you want the caption (it’s cute) you should put something meaningful like “Cathy Houston Winner”. If so, also change it in the <img …> tag from alt=”photo 1 2” to alt=”Cathy Houston Winner”.

6.5 Advanced HTML - Tables

Tables are useful when you want to line data up in columns. We use them on pages such as the list of Champions where we want the years and names aligned in separate columns:

To format into a table with three columns, you first identify there is a table:

<table>…</table>

Each row starts and ends with a table row tag: <tr>…</tr>

Each cell starts and ends with a “td”: <td>…</td>


To create the table above with just three rows, the basic table commands are:

<table> <tr><td></td><td>CLUB CHAMPIONS</td><td >LOW NET CHAMPIONS</td></tr> <tr><td>2013</td><td>Annette Krey</td><td>Tina Gray</td></tr> <tr><td>2012</td><td>Annette Krey</td><td>Jenny Dillon</td></tr> </table>

That wouldn’t lay out as pretty as we want. That layout looks like this:

We want bold headings, the year to be left aligned and more spaced out. We want 50 pixels for the year and 200 each for the name columns.

Here is how this page’s format actually looks. (You don’t need to learn this in detail – each year we just copy the top row to create a new row and update the year and names.) Notice also how it doesn’t matter that we have extra spaces or tabs in the columns – those are ignored. <table align="center"> <tr><td width="50"> </td><td align="left" width="200"><B><font size="3">CLUB CHAMPIONS</font></B></td><td width="200" align="left"><B><font size="3">LOW NET CHAMPIONS</font></B></td></tr> <tr><td> 2013 </td><td>Annette Krey</td><td> Tina Gray </td></tr> <tr><td> 2012 </td><td>Annette Krey</td><td> Jenny Dillon </td></tr> </table>

6.5.1 Table align=”left”, “right”, “center”

These commands control table text layout for the columns. The entire table is centered.

6.5.2 width=”n”

This is used to control how wide (in pixels) you want the column. Otherwise it wrapped and didn’t look pretty.

6.5.3 Spanning Columns

One other handy trick is used on the Officer Page.


On this page we have a table and columns where we list the Captain, etc. but want to have the Tournament committee without a column. If we ended the table, things wouldn’t line up right. So we put the entire committee in a table and for the title and TOURNAMENT list and “TEAM PLAY” heading use the command: colspan="2". (You will see <td colspan=”2”> in these columns). This says this cell gets to span across two columns. It’s like “merge” in excel.

6.5.4 <tbody> … </tbody> Tags

Some pages you’ll see, just below the <table> and before the </table> a <tbody> and </tbody>. WordPress added those. They aren’t necessary. If removed nothing is impacted.

jan mccleery, december 2014 - dbwgc.files.wordpress.com...dbwgc 1 website guide - 2020 1 dbwgc’s...

Documents