\documentclass[11pt]{article}
 \usepackage{splat, inchmargs, headsup}

\setlength{\parskip}{\medskipamount}

\pagelengthen{1in}
\pagewiden{.35in}

 \nofiles % Uncomment this line if there are no cross references.

\begin{document}

\begin{center}
 {\Large Web Design}
 \end{center}

You will create a single web page and later a multi-page web site on a
flash drive.  You can also store your materials on one or more
computers and perhaps eventually on a web server where it will be
publicly visible.  But keep track of the flash drive, which you'll
eventually turn in to your teacher.

The basic steps we will go through will be on a series of handouts and
will extend over several classes.  The checklist of items to turn in
for the 2nd term also gives a brief overview of what will need to
be done, but starting with this handout, you will get more detail.

\section*{Web Design Part 1}

\begin{enumerate}

\item Make a storyboard (a basic layout plan) for a web page
including a title, headings, paragraphs, and at least two lists (for
example, favorite books or favorite hobbies.

\item Make an initial web page including the content from your
storyboard.  If you envisioned some complicated layout features,
simplify it for now.  Create your web page by using Notepad (generally
available in the ``Accessories'' folder from ``All Programs'' on the
Start Menu of Windows computers.  Make your web page look exactly like
this but with your own document title and your own document content:
 \begin{verbatim}
 <!DOCTYPE html>
 <html>
 <head>
 <title>Title of the document</title>
 </head>
 
 <body>
 The content of the document......
 </body>
 
 </html>
 \end{verbatim}
 \vspace*{-2ex}
 {\bf That is, type exactly what you see above, but change the part between
\verb+<title>+ and \verb+</title>+, and change the part between
\verb+<body>+ and \verb+</body>+.}  Note that the title is something
that will appear in the upper bar of the browser window, not in the
main part of the page; you might want to repeat this title or some
version of it as the first thing in the body of your page.

(The style used above for the DOCTYPE declaration (first line) is to
fit the new HTML standard referred to as ``HTML 5''.  Some browsers
may not yet support all features of HTML 5, but this is probably the
best framework for you to be thinking about, and everything else we
put in our pages in this class should be basic enough to work in any
browser.)

{\bf You may notice that different ``elements'' in the page are
enclosed by matching tags at the beginning and the end, the first {\em
without} a slash and the second {\em with}.  Do not use \verb+<+ or
\verb+>+ except for tags.}  Also, sections may be contained inside one
another (such as the head and the body being contained within the
html, and the title within the head), but a section won't overlap
another except when it is completely contained or containing.

\item Save your web page in an a file on your flash drive using the
``File'' pulldown menu in Notepad.  {\bf Use an appropriate name
ending in ``.html'' and containing {\em no} spaces.}  (I always
recommend on Windows machines to uncheck the box for ``Hide extensions
for known file types'' that you will find in Windows Explorer by
starting from ``My Computer'' and going to ``Tools'' and then ``Folder
Options'' and then ``View''.  This will make it easier for you to be
sure of the full name of each of your files.)  You may have to hit a
button to ``browse folders'' and then go to ``My Computer'' and then
to an entry with a label like ``USB Disk (E:)''.

You can now view this page in a browser.  It's ok if you leave Notepad
open, but you'll want to minimize it to get it out of the way while
you find the file you just saved to (e.g., going from ``My Computer''
on the Start menu to ``USB Disk (E:)).  When you find the \verb+.html+
file you have saved, you can right-click on it and use ``Open With''
to open with a browser such as Internet Explorer, Mozilla Firefox, or
Google Chrome.  You should find all your content in a big mush (except
the title in the upper bar of the browser), so we'll proceed to
improve that.

\item Go back into your page in Notepad and add additional HTML tags
that will improve the formatting.  Specifically, each heading should
be surrounded by tags that look like \verb+<h1>+ and \verb+</h1>+ (or
\verb+<h2>+, and \verb+</h2>+, etc. for smaller and smaller
subordinate headings).  Notice how there is a tag at the beginning
that does not contain a slash and then a corresponding tag at the end
that does contain a slash.  Next, do the same thing for each paragraph
in your page but with the tags \verb+<p>+ and \verb+</p>+.  (Browsers
will generally let you get away without the closing tag on paragraphs,
but it is better to be in the habit of always pairing these tags.)
Note that there are no numbers in the \verb+<p>+ and \verb+</p>+ tags,
and you can use the same tag as many times as you want.  Meanwhile,
the headers get smaller and smaller as you go from \verb+h1+, to
\verb+h2+, \ldots, to \verb+h6+.  But you can have as many headers as
you wish that are of type \verb+h1+, as many as you want of type
\verb+h2+, etc.

Now open the file with your web browser again, or if your web browser
is still running, just go there and refresh the page.  Hopefully the
page will look nicer now, but your lists will probably still look
pretty ugly.

\item Experiment with adding the tags \verb+<br />+, which creates a
line break, and \verb+<hr />+, which creates a horizontal rule (line).
These tags do not come in pairs; browsers will generally allow you to
omit the space and slash, but it is best form to include them.  Use
these tags to neaten up your lists.  (There are also other tags that
can be used for lists; we'll see that later.)

\item Include at least two hyperlinks in your web page.  (This is the
name for things that you click on in the web browser to go to another
page.)  Since you only have one web page of your own right now, you
will need to make these hyperlinks go to other existing pages on the
web.  The form for a hyperlink is basically to surround the text that
appears in the link with the tags \verb+<a>+ and \verb+</a>+ (``a''
for ``anchor'').  But the opening tag will need to also include what
is referred to as an atribute; specifically you must specify a value
for the \verb+href+ attribute that indicates what web page to go to
when the link is clicked.  Thus the opening tag will look like this:
 \verb+<a href="URL">+ where you will need to replace ``URL'' with the
appropriate web address (uniform resource locator).  The URL is what
you would type in the top of your browser to visit a chosen web page,
for example something like \verb+http://google.com+.  Open your web
page in your browser, and make sure the links work as desired.  A full
example of something you might type for a hyperlink and sourrounding
text is this:
 \small
 \begin{verbatim}
 I love <a href="http://www.cityofchicago.org">the city of Chicago</a>, even its winters.
 \end{verbatim}
 \normalsize
 When you do this, the text displayed in your page will be ``I love
 the city of Chicago, even its winters.'', but the words ``city of
 Chicago'' will be displayed in a special way (e.g., different color
 and underlined), and clicking on it will take you to the page at
 \verb+http://www.cityofchicago.org+.

 \end{enumerate}

\end{document}
