Charlie Calvert on Elvenware

Writing Code and Prose on Computers

Elvenware

Table of Contents

HTML Syntax

This page has details about HTML syntax and tags. It covers basic tags such as HREF, CheckBoxes and RadioButtons.

Anchors and HREFs

You can use the Anchor tag to create a hyperlink. By clicking on a hyperlink, a user can navigate to:

Here is a hyperlink tag:

<a href="About.html">About</a>

It begins with an a. The a stands for the word anchor.

It contains an HREF attribute. This attribute is used to specify the location to which the link leads. This location is called the link target. When the user clicks on the link, they are taken to the location specified in the HREF. For instance, the following hyperlink takes you to the Google home page:

<a href="http://www.google.com">Google</a>

The text displayed to the user is found after the angle bracket, and before the closing anchor tag. In the above tag, that word is Google. In the previous tag it is About.

Consider this tag, which leads to the Elvenware home page:

<a href="http://www.elvenware.com/charlie" target="top">Elvenware</a>

It contains a target attribute, which means the link will open in a new tab. Here is how the tag looks in practice. Click on it if you wish:

Elvenware

Look at this line:

<li><a href="#contact">Contact</a></li> 

It has two parts:

  1. The list items: <li>...</li>
  2. The anchor: <a href="#contact">Contact</a>

The href attribute creates the link to the location you want to launch. In this case, it begins with a # sign. That means it links to a location in the current document. You can designate such locations by using the ID tag:

<h2 id="contact">Contact</h2>

Here, for instance, is a link that leads to the beginning of this section of this document.

Here is a link to some detailed information on this subject:

Information about Fonts

Here you can find information about fonts in HTML and CSS.

Sizing a font

You have multiple ways to size a font.

More information

Unicode Characters

Escape special characters like this:

To - &#12392;
Ha - &#12399;

Which yields:

To - と
Ha - は

Or:

To - と
Ha - は

Meta Tags

Meta tags <meta> go in the header and will not be displayed in a document. They are used by the browser itself, by search engines and spiders. They provide information about the page in which they reside.

Two of the most important things you can put in a meta tag are a description and list of keywords.

The tag usually has two attributes, the name and a required content attribute. Sometimes you will find scheme and http-equiv attributes. Don't use both http-equiv and name. They are either-or options.

<meta name="description" content="Learn about the HTML meta tag" />
<meta name="keywords" content="HTML, Elvenware, meta, tag, content, name" />

Name Viewport

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0" />

See also, media queries.

CheckBoxes

See the following example:

JsObjects/HtmlCssJavaScript/Checkbox

Here is a code snippet from that example:

$(document).ready(function() {
    $("#paragraph01").html("This sentence added by jQuery");
    $("input[name=mainGroup]:checkbox").click(displayCheckboxSelection)
});

function displayCheckboxSelection()
{       
    if ($("#walk").is(':checked')) {
        $("#paragraph01").html("You clicked walk");
    } else {
        $("#paragraph01").html("Walk is not selected");
    }
    
    if ($("#drive").is(':checked')) {
        $("#paragraph02").html("You clicked drive");
    } else {
        $("#paragraph02").html("Drive is not checked");
    }
    
    if ($("#fly").is(':checked')) {
        $("#paragraph03").html("You clicked fly");
    } else {
        $("#paragraph03").html("Fly is not checked");
    }
}

RadioButtons

See the following example:

JsObjects/HtmlCssJavaScript/Radiobuttons

Here is a code snippet from that example:

$(document).ready(function() {
    $("#paragraph01").html("This sentence added by jQuery");
    $("input[name=mainGroup]:radio").click(displayRadioButtonSelection)
});

function displayRadioButtonSelection()
{       
    var id = $("input[name=mainGroup]:checked").attr('id');
    
    $("#paragraph01").html("You clicked " + id);
}

There is some information on RadioButtons on the JQuery Page.