CS174
Chris Pollett
Sep 2, 2020
On Monday, we gave a simple HTML 5 document. This consisted of a DOCTYPE declaration, an html tag pair with head and body tag pairs as its contents. The head has to have at least a title tag within it. Let's now examine what can go in the head and body tags pairs in detail, beginning by looking at the head tag:
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" />
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.
Heads of documents can also have (but are 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.
<meta http-equiv="foo" content="bar" />is treated by a browser as if the response header field:
foo: barwas sent.
<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/" />
canvas
tag, a block level tag, can be used to render more sophisticated 2d and 3d objects.<h1>heading1</h1> <h2>heading 2</h2> <h3>heading</h3> <!--this is okay, should not do things like skip from an h2 to an h4 tag without an h3 tag in between. Screen readers use these headings to extract a table of contents for the document -->
<ul> <li>List Item 1</li> <li>List Item 2 <ul> <li>Sub List Item</li> </ul> </li> </ul>
|
<ol> <li>List Item 1</li> <li>List Item 2 <ol> <li>Sub List Item </li> </ol> </li> </ol>
|
<a href="http://www.somewhere.com/">somewhere</a>
<img src="myphoto.gif" alt="This is a picture of me" />
& | & |
< | < |
> | > |
(hard space) | |
" | " |
Σ | Σ |
<style> table, th, td { border: 1px solid black; border-collapse: collapse; } </style> <table> <caption>grade table</caption> <tr><th></th><th>Item</th><th>Value</th></tr> <tr><th>1.</th><td>Homeworks</td><td>50%</td></tr> <tr><th>2.</th><td>Exams</td><td>50%</td></tr> </table>
Item | Value | |
---|---|---|
1. | Homeworks | 50% |
2. | Exams | 50% |
You can make table headings or table data span more than one column or more than one row using colspan, rowspan:
<tr><th colspan="3">heading</th></tr> <!-- if we have two levels of heading--> <tr><th colspan="2">heading</th></tr> <tr><th>subhead1</th><th>subhead2</th></tr> <tr><td>1</td><td>2</td><td</tr>
<table width="100%" border="0" summary="..." >the value can be a percentage or an absolute value in pixels. 0 here means no border.
<table width="100%" border="0" summary="..." > <col width="25%" /> <!-- can be a percentage or number of pixels --> <col width="75%" />
<tr align="center"><td>hi<td><td>there</td></tr> <!-- centers whole row -->
<td valign="top">test</td> <td valign="bottom">test</td>
<table border="5" cellspacing="30" cellpadding="5" summary="..." >
<form name="myform" method="get" action="http://somewhere.com" > <!-- widgets or controls on form --> </form>
http://somewhere.com/?name1=value1&name2=value2...
<input type="text" name="my variable" value="optional default value" />
First Name: [ ]In order to ensure this in accessibility situations you must use the label tag:
<label for="testid" >First Name :</label> <input type="text" id="testid" name="test" value="test" />
<input type="text" id="search" name="search" title="Enter your search terms" placeholder="Enter your search terms"/>
<textarea name="life" rows="3" cols="40" > You can enter your life story here. </textarea>