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

\setlength{\parskip}{\medskipamount}
 \pagestyle{empty}

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

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

\begin{document}

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

\section*{Web Design Part 3}

A summary of the things we will continue with is as follows:
 \begin{enumerate}
 \item Learn about commonly used tags that generate bold and italicized text.
 \item Learn about the use of styles, which can provide for things
like coloring text and backgrounds, changing type styles and sizes,
and adjusting positioning and alignment of parts of a page.
 \item Learn about tags for tables and lists.
 \item Create a multi-page web site.
 \end{enumerate}
 In this handout, we will get through beginning styling to the point
of incorporating an internal style page in your initial web page.  We
elaborate this via the following sequence of detailed steps:

\begin{enumerate}

\item Experiment with inserting the tags \verb+<em>+ and
\verb+<strong>+ for ``emphasis'' and ``strong emphasis'',
respectively.  Each of these tags gets paired with a corresponding
closing tag (\verb+</em>+ and \verb+</strong>+).  Text surrounded by
\verb+<em>+ and \verb+</em>+ will appear in italics; text surrounded
by \verb+<strong>+ and \verb+</strong>+ will appear bold.  Remember
that elements (surrounded by an opening tag without a slash and a
closing tag with a slash) can be nested one inside another, but don't
otherwise make them overlap.  So you might have something like:
 \\\verb+Here is <strong>bold, <em>italics inside</em> and back to just bold</strong>.+
 \\ but don't do something like:
 \\\verb+Don't overlap <strong>bold and <em>italics</strong> like this</em>.+

\item The technology we will use for further styling is referred to as
``css'', which stands for ``cascading style sheets''.  We will not
cover this in full generality, but we will use all of the three
possible methods of inserting styles:
  \begin{itemize}
  \item Inline styles
  \item Internal style sheet
  \item External style sheet
  \end{itemize}
 We will work with the first two methods before working with tables
and lists and the third afterwards.

\item Experiment with adding inline styles to a few of your elements.
This is done by adding a \verb+style+ attribute to the opening tag of
any element (heading, paragraph, link, etc.) that you would like,
similar to the way that we included an \verb+href+ attribute in our
links (tagged with \verb+a+ for ``anchor'').  For example, if you have
a top-level heading you would like to appear in green and underlined,
you can do something like
 \begin{verbatim}
 <h1 style="color: green; text-decoration: underline;">My heading</h1>
 \end{verbatim}
  \begin{itemize}
  \item Notice how the value of the \verb+style+ attribute is given
with an equal-sign and quotes.  Within that value, each setting ends
with a semicolon, and each setting contains a specific property
followed by a colon followed by a value.
     \begin{itemize}
     \item \verb+color+ is used to change text color, and you can find available color names at
           \\\url{http://www.w3schools.com/tags/ref_colornames.asp} or use the color picker at
           \\\url{http://www.w3schools.com/tags/ref_colorpicker.asp} to get a color code
           comprised of a sharp-sign and six more characters.
     \item \verb+text-decoration+ can provide some other properties:
\verb+blink+ (doesn't work in Explorer, Chrome, or Safari browsers),
\verb+underline+, \verb+line-through+, and \verb+overline+.
     \end{itemize}
  \item You could put such a style attribute in the opening tag of one
of your paragraphs instead or even in the opening \verb+body+ tag to
apply to the entire body of your page.  You can also make a new grouping of
a bunch of stuff in your page by putting a \verb+<div>+ tag at the beginning
and \verb+</div>+ at the end.  Then you could apply a style to this chunk of
your page by inserting it in the opening \verb+<div>+ tag.
  \item You can set many other things in a \verb+style+ attribute.  A
good reference for all the choices is
  \\\url{http://www.w3schools.com/css} ; the things we've seen so far
are under ``Styling Text'' in the set of links at the left.
  Another example there is that you could put \verb+text-align: center;+
 to horizontally center the text in your lines.  You might
also be interested in things like ``Styling Backgrounds'', ``Styling
Fonts'', and ``Styling Links''.  Later, we will also look at things that
come under ``Styling Lists'' and ``Styling Tables''.
  \item You could look at many more things under ``CSS Box Model'' and even ``CSS Advanced'' at
  \\\url{http://www.w3schools.com/css} , but don't get carried away at
this point.  Just come up with two or three inline styling things that
you would like to incorporate into your page.
  \end{itemize}

\item Once you are comfortable with the use of styles, create an
internal style sheet.  You do this by adding it in the \verb+head+
section of your page (between \verb+<head>+ and \verb+</head>+); it
can appear before or after the \verb+title+ part.  It will begin with
\verb+<style type="text/css">+ and end with \verb+</style>+.
An example is as follows:
 \begin{verbatim}
    <style type=''text/css''>
        body {
            background-color:  #ffcc00;
        }
        p {
            background-color: #003366;
            color:  white;
            padding:  25px;
            font: large arial;
        }
        img {
            border: 5px dotted red;
            padding:  10px;
            background-color: white;
        }
    </style>
 \end{verbatim}
 This example will change the background color of the entire body of
the page but use a different background color for all paragraphs
(since they are marked with the \verb+p+ tag).  It will also make the
text in paragraphs white, put 25 pixels of space on all sides around
the text of each paragraph, and put the text of all paragraphs in a
large arial font.  Finally, it puts each image (marked with the
\verb+img+ tag) on a white background and surrounds it with 10 pixels
of space on each side and a dotted red border that is 5 pixels wide.
Make your own internal style sheet for your web page.


\end{enumerate}

\end{document}
