# HTML Day One Take-Home Assignment If you have time between now and Day Two of HTML, you would benefit from completing these following exercises. Do your best to do these from memory, but by all means look up anything you're not familiar with. The full set of resources is at . You might also benefit from the online Tryit! tool at , which has modes for HTML and Markdown, both of which are featured in these exercises. ## Part One: Fixing Errors Take the following HTML Document, save it on your local computer, and fix all the HTML errors. Some of the errors come from the ambiguity with what the author was intending with the given markup. You should try viewing the document as it stands right now (i.e., with its errors), available [here][] when it doubt, try to make your HTML fixes such that they don't affect how the page is rendered by the web browser. [here]: ./htmlday1takehomepart1.html Synergy Corp. Home

Welcome to Synergy Corp.

"Your Business, Our Passion"

our logo

Menu:

About Us!

Synergy Corp is in the business of connecting people with what they need. We provide the marketing and business backbone to get you what you need here and now. We make all efforts to ensure you can focus on what matters most to you and your business -- your business!

Employee Perspectives

You could even run your code through the HTML Validator at . (Note, though, that it'll probably complain about not knowing which version of HTML to validate against, something we'll talk about in Day Two.) ### Part 1 Solution Well you asked for it... | | | | Synergy Corp. Home | | | |

Welcome to Synergy Corp.

|

“Your Business, Our Passion”

|

“our

| |

Menu:

| | | (block-level tags cannot be within | inline tags, so this must be | copy/pasted into each block-level | tag) —> |

About Us!

| |

Synergy Corp is in the business of connecting people | with what they need. We provide the marketing and | business backbone to get you what you need here and now. | We make all efforts to ensure you can focus on what | matters most to you and your business — your | business!

| —> | |

Employee Perspectives

| | |
    |
  • Alan Alda |
      |
    • CEO
      • |
    • MBA, Cornell
      • |
    • |
  • Loretta Swit | |
      |
    • Manager
      • |
    • AA, BCC
      • |
    |
  • Gary Burghoff |
      |
    • He Who Makes the Coffee
      • |
    • PhD, UC Berkeley
      • |
    |
| (this is extra)—> | | | | This is only one interpretation of what the original author might have meant with the HTML. I think this is the "right" interpretation, but I may be wrong. ## Part Two: Markdown Conversion In this part of the assignment you will be converting some plain text in "Markdown" into a valid HTML document. ### What is Markdown Markdown is a popular way of writing content for the web. The author of Markdown, John Gruber, says that > "the overriding design goal for Markdown's formatting syntax is to > make it as readable as possible. The idea is that a > Markdown-formatted document should be publishable as-is, as plain > text, without looking like it's been marked up with tags or > formatting instructions. While Markdown's syntax has been influenced > by several existing text-to-HTML filters, the single biggest source > of inspiration for Markdown's syntax is the format of plain text > email." You can learn more about Markdown at [its home page][mdownhome], where you'll also find links to pages explaining its syntax. You can view the Markdown source for this document by changing its extension to '.txt'. You can do some trial runs--converting your own plain text into HTML--at the [online dingus][dingus] for Markdown or by using the [Markdown Mode of the TryIt! tool][tryit mdown]. [mdownhome]: http://daringfireball.net/projects/markdown/ [dingus]: http://daringfireball [tryit mdown]: http://tryit.uwwebpub.com/?mode=Markdown ### Conversion: Quotes and Angle-Brackets Markdown converts regular quote-marks to "typographer's quotes"--quotes that angle in toward the text that they surround. It does this by replacing quote-marks with the *character entities* for typographer's quotes. You are not required to do this conversion. Markdown also converts less-than and greater-than signs to their character entities if they're inside code regions (regions surrounded by back-ticks, `` `like this` ``, or entire blocks indented one level.) Not doing this will make your code invalid, so you *are* supposed to do this conversion. (What I would do is simply copy/paste the regions you want to convert into a new document and then run a simple find-and-replace operation on the new document to replace `<` with `<` and `>` with `>`; once done, simply copy/paste it back into your original document.) ### Blockquote, Code, and Pre You will also need to know the `
` tag: it's a block-level tag used to denote an entire region being directly quoted from another source. Since it defines a region of blocks, you must put all text inside the `
` tag inside of a `

` tag. Here is an example:

It is a far, far better thing that I do, than I have ever done; it is a far, far better rest that I go to, than I have ever known.

...which would be rendered as

It is a far, far better thing that I do, than I have ever done; it is a far, far better rest that I go to, than I have ever known.

A similar, *block-level* tag is `
`, which defines a
region as being **pre-formatted**. Within a `
` tag,
**line breaks and spaces are noticed**. This tag is commonly
combined with the `` tag.

The `` tag is an *inline* tag that defines text as being
computer code (e.g., HTML).  The default style for
`` also defines a 
monospace font designed to make code easier to read.

So this code

    
int *demux(int *j)
    {
        int i;
        for ( i=0; i < 10; i++ )
            for ( j=i; *j < i*i; i-- )
                j = *j >> 2 << i;
        return *j;
    }
    


is rendered like


int *demux(int *j)
{
    int i;
    for ( i=0; i < 10; i++ )
        for ( j=i; *j < i*i; i-- )
            j = *j >> 2 << i;
    return *j;
}



(Note that you **do** have to convert less-than and greater-than signs
into their character entities within a `
` tag.)


### The Assignment

Add all of the necessary HTML to make the following Markdown document
into a valid HTML Document.

    # HTML Review
    
    **HTML** stands for *Hypertext Markup Language*. It is
    used throughout the web for *defining what content is*.
    
    We like to think of the various HTML tags as being like
    different *highlighters*. We said at the beginning of
    class that
    
    > HTML defines what content is much in the same way that
    > underlining and font/position changes in books tell us
    > that content is story text, chapter headers, page
    > nubmers, and items in the index.
    
    ## Tags
    
    A basic tag looks like
    
        Data
    
    Be sure to note that
    
     1. *Attributes do not need to be repeated when you close
            the tag*. Aside from this making HTML slightly easier
        to type, can you think of a reason why this is? We'll
        discuss this on HTML Day Two.  Also note that
    
     2. *Spacing is arbitrary*. So the following block of code
        is equivalent to the above example:
    
            
                    Data
            
        
        It's is also equivalent to this block of code:
        
            Data
            
        
        The mnemonic is "white-space is white-space."  
        
        Also note that
    
     3. There are three separate but equal types of tags:
     
         *  **Block-Level** tags--`
`, `
`,
            `
`, `