Basic Syntax

Last Wednesday, we finished talking about HTTP and started going over this slide on the basic syntax of HTML:

The fundamental structural unit of HTML is a pair of tags.
For example, a paragraph might be specified with: <p>The quick brown fox..</p>
Here <p> is called the open tag and </p> is called the close tag. The quick brown fox is the content of the tag.
XHTML documents are case sensitive -- tags must be lower case for the document to validate. HTML documents can be case insensitive.
To be a legal XHTML document, every open tag must be closed. Further, the nesting must be legal.
In HTML 5, some tags do not need to be closed: area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr .

Some examples:

<img src="my_picture.png" ></img> 
    <!-- this is okay in an XHTML document (not in HTML 5). 
    BTW, this is an example HTML comment -->
<img src="my_picture.png" /> 
    <!--this is okay for both XHTML and HTML 5 and is an abbreviation for the line above -->
<img src="my_picture.png" >  <!--okay only in HTML 5, but don't use for this class -->
<P>old style paragraph</P> <!--okay only in HTML 5, but don't use for this class -->
<p><i>Hello</i></p> <!--okay -->
<p><i>Hello</p></i> <!--not okay -->

Open tags may have attributes. For example, src in the image tag above. The value of an attribute must be given in double quotes or single quotes for XHTML. Quotes are optional for HTML 5.

For this class, I want you to use XHTML syntax because it will work in the HTML case and gives your documents greater flexibility and makes it easier to find bugs.

Standard XHTML 1.1 Document Structure

XML declarations:

<?xml version ="1.0" encoding="utf-8" ?>
<!-- as not supported by some old 
   browsers validators doesn't usually check this -->

SGML DOCTYPE. This says which Document Type Definition will be used:

<!DOCTYPE html  PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

The XHTML document:

<html xmlns="http://www.w3.org/1999/xhtml" >
		<!-- might have namespaces for other things like SVG -->
<head>
	<title>name of my document</title></head>
<body><!--actually page stuff--></body>
</html>

Minimal HTML 5 Document

In HTML 5 a lot of the syntax which is hard for humans to remember has been stripped-away.

Notice the !DOCTYPE is much simple, and notice how we specify the character set:

<!DOCTYPE html>
<html>
    <head>
        <title>Simple HTML</title>
        <meta charset="utf-8" />
    </head>
    <body>
    <h1>Example HTML 5 document.</h1>
    </body>
</html>

This basic structure will also work for XHTML 5 -- we just need to follow XML conventions for closing tags when we start to add content.

Where to Edit HTML

You can create and edit an HTML document in any text editor.
You should avoid editors though which will probably insert formatting characters that you don't see. For example, it is sub-optimal to use Word to make a HTML document from scratch.
Saving a document as HTML from a word processor such as Word usually produces poor quality HTML: lots of redundant tags and styles, and often times non-standards conforming.
You can usually get by with the editors in your favorite IDE, although I find some IDEs such as Eclipse to be too slow and intrusive for web development. For PHP there is the IDE PHPStorm which is reasonably good.
I am suggesting people to use Gedit, because it is available for Mac, Windows, and Linux, it is small and fast, it let's you see special characters, and it supports code highlighting.
Make sure if you are on a Windows system to set folder preferences so as to be able to see file extensions. That way, you don't think you are saving a file as MyGreatHtml.html and ending up really saving MyGreatHtml.html.txt

How to "run" your HTML

Dragging an HTML page into your favorite browser's window will show you what your HTML page looks like somewhat correctly:
- The URL your browser will use in this case will be: file://file-system-path-to-your-html-file.
- Relative paths and absolute paths for links and images will often be broken by doing this.
- Media types like video and audio will probably not work if they require a streaming server.
- If the page has any server side script directives they will not run.
It is better to put your HTML documents somewhere under the document root of a web server such as Apache. Make sure your web server and any other needed servers such as Mysql are running. In XAMPP, MAMP, WAMP, etc., there is a control panel for this. Then point your browser to the url corresponding to your web server.

What does it mean for your HTML to "work"?

The organization that you are coding for will often have guidelines as to which browsers your HTML needs to work on and to what degree it needs to be able to work. To be more specific, they might be less stringent in how well it has to work for older browsers.
For this class, you can do the initial development of your HTML using mainly one browser of your choice... however...
You should then test and get your code to work on all of the major browsers: Internet Explorer, Edge, Firefox, Safari, Chrome, and Opera.
It should work on current as well as three year old versions of these browsers.
It should work on Desktop and mobile devices.
Most likely you won't have to change anything, but you should still check.
You should make sure your code conforms to the HTML spec you are using by testing it on the W3C Validator Service.
You should make sure your code passes an automated test of accessibility (so that it would work in a screen reader) such as the WAVE Webaim Accessibility Tool.

The head of an XHTML or HTML5 document

Let's go back to examining the parts of an HTML document...

At a minimum the head of an html document needs to have within it a <title></title>.
Additional allowable tags include:
link
associate another document with this current document. Might want to do this to associate a stylesheet or to give a favicon.ico. One can also specify using prev and next. The position of this document in a collection of documents.
```
Examples:
  <link rel="stylesheet" type="text/css"
            href="http://somewhere.com/css/search.css" />  
  <link rel="icon"   
    href="http://www.cs.sjsu.edu/faculty/pollett/favicon.ico" />
  <link rel="prev"   
    href="./?LecList.php" />
```
base
specify a base directory for all references on the page:
```
Example: 
  <base href="http://www.my.com/stuff/"  /> 
```
Now a link <a href="file.html" >file</a> would have the implicitly base address in front of it.
script and style
we'll talk about these next week specifies information about this page. Let's look at this more

Kinds of Meta Information

Head's of documents can also have (but is not required to have) meta tags.

<meta name="author" content="who wrote the page" />
<meta name="generator" content="ChrisTextTool" /> 
   <!--What software was used to generate this html -->
<meta name="description" content="how I would like the search 
   engines to describe my page. " />
<meta name="keywords" content="cool site" /> 
   <!--Key terms search engines should index this site with. 
    Unfortunately, not really used by search engines anymore -->
<meta name="robots" content="comma separated list of 
   what would like crawler to do" /> 
   <!-- Example commands NOINDEX, NOFOLLOW, NOCACHE, NOSNIPPET, NOODP, NOYDIR . 
     Some of these commands can also be specified in a robots.txt file. ROBOTS
     and these values are case insensitive.-->

Rather than use robots in the above you can also give directives for specific robots.

In addition to the above meta tags, we will see later in the semester how aspects of how the screen renders in a mobile phone can be affected by meta tags.

The WHATWG Meta Extensions page contains a relatively complete list of values for the name and content attribute.

More Meta Information

You can also use meta tags to give the equivalent to http header fields:
```
<meta http-equiv="foo" content="bar" />
```
is treated by a browser as if the response header field:
```
foo: bar
```
was sent.

For example:

<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Expires" content="Wed, 30 Aug 2006 14:25:27" />
<meta http-equiv="refresh" content="10;url=http://www.cs.sjsu.edu/" />

Quiz

Which of the following statements is true?

A Web Server looks under its server root directory to try to find the file requested by the path portion of a url.
text/plain/Notepad is a valid MIME type.
HEAD is one of the kinds of HTTP requests we discussed last week.

The body of a web page

There are two basic kinds of elements that can appear within the body of a web page.
block level elements
basic units of layout.

inline level elements
control formatting within blocks.
A block element is essential a rectangular region on the web browser screen.
Just as a sculptor needs to know how to fashion surfaces depending on the medium like marble or wood -- you too, will need to know how to generate more sophisticated shapes using this basic element.

Getting Round Objects and Other Effects

From the earliest days of the web, people used tricks with background images and foreground images and the width and height attributes of the img tag to achieve more fixed spacing, rounded objects, lines, gradients, etc.
For example, if your block level element allowed you to specify a background image (effect still used in CSS), you can easily fake circles.
Nowadays, there is a CSS way to achieve rounded corners: border-radius, but you will still see code on the web using this older technique.

More effects

A single white pixel image could have its width and height scaled to achieve a region of white space; a single black pixel could be stretched to make lines.
A single line with a color gradient could be stretched to apply a background color gradient to an element.
You might also align images around a block level element to make interesting borders.
Again, each of these effects can now be achieved by stylesheets, the point though is that by thinking outside the box a little one can achieve a wide variety of graphical effects.

What tags can go into the body of a web page?

<h1></h1> - <h6></h6>

heading tags to give a heading title for a section. These must be properly nested.

  <h1>heading1</h1> 
	<h2>heading 2</h2>
		<h3>heading</h3>
  <!--this is okay -->

<p></p>

used to specify a paragraph. By default this is style'd with an indentation.

<div></div>

used to specify a related section of text. This tag is a very generic container tag that doesn't have very much semantic meaning. HTML 5 specifies several other block level container tags with more meaning: <header>, for text that is at the top of the document; <section>, for chapters, etc.; <figure>, for figures included in documents.

<blockquote></blockquote>

used to indent large quotations.

<ul></ul> <ol></ol>

unordered and ordered lists. Elements in list are specified with <li></li>. There are also <dl></dl> definition lists.

  <ul>
    <li>List Item 1</li>
    <li>List Item 2
      <ul>
        <li>Sub List Item</li>
      </ul>       
    </li>
  </ul>

List Item 1
List Item 2
- Sub List Item

  <ol>
    <li>List Item 1</li>
    <li>List Item 2
      <ol>
        <li>Sub List Item </li>
      </ol>       
    </li>
  </ol>

List Item 1
List Item 2
1. Sub List Item

<form></form>

used to make a web form.

<table></table>

used to make a table in a web page.

XHTML and HTML 5

Outline