Guide to HTML code

Learn about the HTML code used to implement Decorator 4

The code on this page is presented in the same top-to-bottom order that it appears in the "three-column.html" file. As noted below, not all code presented here will be used for all templates. The code below is clearly annotated with what should and should not be changed for your specific applications.

Note: If you are adding any JavaScripts to the template files, add them only in the footer in the designated location.

Head

The head contains page metadata, links to the Decorator stylesheet and browser compatibility JavaScripts.

Replace the text that is in ALL CAPS with your site and page information. Do not change any other code:

    <title>INSERT TITLE HERE</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta name="robots" content="index,follow,noarchive">
    <meta name="ORGANIZATION" content="University of California, San Diego">
    <meta name="SITE" content="SITE NAME HERE">
    <meta name="PAGETITLE" content="INSERT TITLE HERE">
    <meta name="DESCRIPTION" content="INSERT DESCRIPTION HERE">

This code accesses the Decorator styles. Do not change this code:

    <link href="styles/bootstrap.css" rel="stylesheet"/>
    <link href="styles/base-min.css" rel="stylesheet"/>

If you need to apply a site-specific CSS file, you can insert the link to your CSS here:

    <!-- Begin site-specific CSS files -->
    <!-- End site-specific CSS files -->

This code provides compatibility with older versions of Internet explorer. Do not change this code:

    <!--[if lt IE 9]>
    <link rel="stylesheet" type="text/css" href="styles/ie-support.css" />
    <![endif]-->
    <!-- Other JS files -->
    <script src="//www.ucsd.edu/common/cwp/4.0.0/scripts/modernizr.js"></script>
    <!--[if lt IE 9]>
    <script src="scripts/respond.js"></script>
    <![endif]-->

Body

The body contains code for site navigation and content (organized by columns as appropriate for the template chosen).

Navigation

This code determines the page title. Update it as appropriate for your site:

            <div id="tdr_title">
                <div id="tdr_title_content">
                    <a href="http://www.ucsd.edu" id="tdr_title_ucsd_title">UC San Diego</a>

This code controls the navigation ribbon. Update it as appropriate for your site:

            <nav id="tdr_nav" class="navbar" role="navigation">
                <div id="tdr_nav_content">
                    <ul class="tdr_nav_list">
                        <li>
                            <a href="index.html">Home</a>
                        </li>
                        <li class="active">
                            <a href="templates.html">Templates</a>
                            <ul>
                                <li><a href="blank-slate.html">Blank Slate</a></li>
                                <li><a href="two-column.html">Two Columns</a></li>
                                <li><a href="two-column-b.html">Two Columns B</a></li>
                                <li><a href="three-column.html">Three Columns</a></li>
                                <li><a href="form-a.html">Basic Form</a></li>
                            </ul>
                        </li>
                        <li class=""><a href="docs/index.html">Kitchen Sink</a></li>
                    </ul>

This code controls the search function. Do not change this code:

                    <div class="tdr_search">
                        <button class="btn btn-default" id="tdr_search_toggle">
                            <span class="glyphicon glyphicon-search"></span><span class="caret"></span>
                        </button>
                        <div id="tdr_search_content">
                            <form action="http://act.ucsd.edu/cwp/tools/search-redir" method="get" id="cse-site-search">
                                <select class="search-scope" name="search-scope">
                                    <option selected="selected" value="cwo">This Site</option>
                                    <option value="default_collection">All UCSD Sites</option>
                                    <option value="faculty-staff">Faculty/Staff</option>
                                </select>
                                <div class="input-group">
                                    <input placeholder="Search..." type="search" class="form-control search-term" id="q" name="search-term">
                                </div>
                            </form>
                        </div>
                    </div>

This code controls the breadcrumb navigation. Update it as appropriate for your site:

            <div id="tdr_crumbs">
                <div id="tdr_crumbs_content">
                    <ol id="tdr_crumbs_list" class="breadcrumb">
                        <li><a href="index.html">HOME</a></li>
                        <li><a href="templates.html">Templates</a></li>
                        <li class="active">Three Columns</li>
                    </ol>
                </div>
            </div>

Content

This code introduces the main content area of the page. Update it as appropriate for your page:

        <main role="main" id="tdr_content">
            <div id="tdr_content_content">
                <div id="tdr_3_col_wrap">
                    <div id="tdr_3_col_content">

This code introduces the third column content area of the page (far right column). It will only be present in the Three Columns template. Update it as appropriate for your page:

                    <div id="tdr_3_col_supplement">
                        <div class="styled">
                            <h3>Hello</h3>
                            <p>This is a third column</p>
                        </div>
                    </div>

                    <div class="styled">
                        <h2 id="page_nav_title">
                            Navigation
                        </h2>
                        <ul id="page_nav">
                            <li class="">
                                <a href="#">Nav Link 1</a>
                            </li>
                            <li class="">
                                <a href="#">Nav Link 2</a>
                            </li>
                            <li class="expanded active">
                                Styles
                                <ul>
                                    <li><a href="#">Sub 1</a></li>
                                    <li><a href="#">Sub 2</a></li>
                                    <li><a href="#">Sub 3</a></li>
                                </ul>
                            </li>
                            <li class="">
                                <a href="#">Nav Link</a>
                            </li>
                        </ul>
                    </div>

Footer

The footer contains information appropriate to all UC San Diego websites, such as address, copyright, feedback and emergency notifications.

Do not change the current footer content, including JavaScripts.

Exception: You may insert site-specific JavaScripts at the location indicated below. Please insert your JavaScript files only at this location to promote optimal loading of the page.

<!-- Site-specific javascript files -->
<script src="docs/site-specific.js"></script>