Overview

HTML is the coding language used for creating web pages and other information that can be displayed in a web browser. Knowledge of HTML is not necessary to successfully manage the website content. The HTML Master Class provides a basic introduction to HTML for the Editor.

Required Permissions

• Admin

Understanding HTML

• HTML stands for Hyper Text Markup Language. This is the coding language that constructs websites. HTML ‘tags’ instruct the internet to display the appropriate information .

• Tag are found before and after information to display. Every piece of content to display has an opening tag and a closing tag. An opening tag has a less than sign <, also called a bracket, followed by the instruction and then a greater than sign > or bracket.

  • e.g. <instruction goes here >

• A closing tag, in most cases, repeats the opening tag except includes a forward slash  / after the less than sign. 

  • e.g. </instruction goes here>

• The instructions to the internet is surrounded by brackets creating a tag while the content to display on the internet is between the tags.

Standard Tags for Your Website

• Standard tags are fairly intuitive. The standard tags frequently used on a website are:

  • <p> starts a paragraph

  • <h1> header 1,<h2>  header 2, etcetera through 5

  • <i> for italic

  • <strong>  bold

  • <ul>  unordered list or bulleted list

  • <ol>  ordered list or numbered list

• Remember every opening tag has a closing tag so to create a paragraph write: <p> I love HTML </p> 

• One tag does not need a closing tag. The break tag or <br> forces a new line in a paragraph. A simple <br> at the end of a sentence or content creates the line break without adding a closing tag.

Accessing HTML View

• The HTML view is accessible from any Click To Edit area on the website including Email, Articles and Calendar Event Flyers. 

• Scroll to the bottom of the Editor window to locate the  Design, HTML, and Preview buttons. Select the HTML tab to display the HTML for the selected content area.

• Once inside the HTML view, the tags at work are visible. The hierarchy of the different header tags, paragraph tags and break tags are also visible.

Tags Styling

• When the appropriate style option is selected from within the Editor, a tag is automatically assigned to the content. The Header tag styles, size and color and the paragraph font style, color and spacing are predetermined as part of the website development.  The assignment of the font style, color, size and behavior to the HTML tags is done in the CSS which stands for Cascading Style Sheet. CSS files help define font, size, color, spacing, and border display on the webpage. CSS is used to create a continuous look throughout multiple pages of a website. 

• For instance, CSS tells Header 1 (<H1>) to be Arial 16px or Header 2 (<H2>) to display as Garamond 14 pixels with a line space below of 8 pixels. Included in the predetermined styles is the spacing above and below all style options including normal.  

• Use the Editor Style Options consistently across all pages of the website.  As long as the standard header tags and fonts are used consistently, then any changes in the CSS to a Heading or Paragraph style will automatically update the items on the website using that tag.  For instance, if  <H1> is currently styled as blue in the CSS so every <H1> is displaying blue throughout the website, then a code change in the CSS to make all <H1>  bright orange changes every <H1> on the website to bright orange.  CSS changes must be made by a Front End Developer and may incur fees.

Span Tags

• Similar to <p> tags and header tags, span tags allow for custom formatting across given text. Span tags will be commonly found when a user has not used the header styles and instead, uses a specific font, size and color from within the editor.  Span Tags might also appear if the editor has changed the content and style options frequently and all of the old tags did not get deleted during the editing process. Span Tags appear in blast emails, which is expected since the Emails cannot use the predetermined settings and must use the font style options in the Editor.

Link Tags

• Links on a page appear as <a href ="https://clubessential.com " target="blank">click here</a> in HTML. An opening tag and a closing tag are visible. The content that is to display and is the active link  is located between the two tags; in this case the words “click here.” The opening tag includes the destination address (https://clubessential.com) along with directions to open the destination in a new window (target = "blank"). Any link taking the end user off the website to another website or a document for instance, should always open in a new window.

• Here is a sample of properly written HTML for creating a link. Remember, a website does not require you to learn HTML to create links. The Hyperlink Manager Tool in the editor easily manages links. Hyperlink Manager Tool instruction is found in the Editor Tools section of the Wiki

Image Tags

• A common and valuable practice on a website is to add images to a content area.  Whenever an image is placed on a page, the link is within an <img> tag. Image tags reference the storage location of the image. In order for the Image to display properly, the Image must be uploaded to the website in the Image Explorer.

Best Practices

FAQs