INLS161-001 Fall 2018 Task 02.01

12 Sep 2018

Class Schedule

Basics | sessions 01-05

Web Development | sessions 06-11

Document Markup | sessions 12-14

03 Oct | object layers
08 Oct | tools that read markup
10 Oct | document markup lab

Spreadsheets | sessions 15-19

Relational Database | sessions 20-26

Presentation | sessions 27-30

School Information

External Links

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

home & schedule | class blog | syllabus | contact | grades

The first component is to demonstrate some hard coding skills, first with HTML.

Hard code a basic web page

Task 02.01

Task 02.01 is to create an initial hard-coded homepage, a page we will use in class to practice other skills. Use a basic text editor and type in the text on the tags page of the HTML session class notes.

Create a folder on your computer and name it "task02-01", then save the file as index.html in the folder you just created so that it will display as the first page in that directory. This may be the basis of your fuller task 02 website, but it does not have to be. You may wish to use this hard-coded page solely for HTML practice in class, but create a totally individualized, fuller, multi-level personal web site according the specs below.

SFTP the entire "task02-01" folder to your public_html space by 2359 on day before the CSS session, and tell me to look at it via an email which gives me the URL to use. This task component is required, just to compel you to try out hard coding.

back to top

You may wish to add some additional elements to your page.

Note that the code below is a bit wider than the white space, but you can still copy it all and paste it into your text editor, should you wish to do so.

<body>
  <div id="main">
    <header>
      <div id="logo">
        <div id="logo_text">
          
          <h1 id="top"><a href="http://ils.unc.edu/courses/2018_fall/inls161_003/index.html">INLS161-001<span class="logo_colour"> Fall 2018</span></a></h1>
          <h2>Information Tools | <span class="web">First Page</span></h2>
        </div>
      </div>
      <nav>
        <div id="menu_container">
          <ul class="sf-menu" id="nav">
            <li class="today"><a href="index.html">home</a></li>
            <li><a href="http://ils.unc.edu/courses/2018_fall/inls161_003/index.html">class site & schedule</a></li>
            <li><a href="http://ils.unc.edu/courses/2018_fall/inls161_003/001.syllabus.html">syllabus</a></li>
            <li><a href="holdforbloglink">class blog</a></li>
          </ul>
        </div>
      </nav>
    </header>
    <div id="site_content">
      <div id="sidebar_container">
        <div class="sidebar">
          <h5>Last Updated on [enter date here]</h5>
          <blockquote class="web-left">
            Let's work on some hard-coding.
          </blockquote>
      </div>
        <div class="sidebar">
          <h2>Something of interest</h2>
          <p>whatever you find interesting</p>
        </div>
      <div class="sidebar">
          <h2>School Information</h2>
          <ul>
            <li><a href="http://sils.unc.edu/">SILS</a></li>
            <li><a href="http://www.unc.edu/">UNC</a></li>
            <li><a href="http://help.unc.edu/">ITS Help</a></li>
            <li><a href="http://its.unc.edu/about-us/what-we-do/information-security/">ITS Security</a></li>
            <li><a href="http://help.unc.edu/help/basic-security-checklist/">ITS Basic Security Checklist</a></li>
            <li><a href="http://help.unc.edu/subject/support/">ITS Support</a></li>
            <li><a href="http://registrar.unc.edu/AcademicCalendar/index.htm">Academic Calendar</a></li>
            <li><a href="http://events.unc.edu/">Carolina Events Calendar</a></li>
          </ul>
          <h2>External Links</h2>
          <ul>
            <li><a href="http://www.unc.edu/~bergr/">reb</a></li>
            <li><a href="http://www.howstuffworks.com/category.htm?cat=Comp">How Stuff Works</a></li>
            <li><a href="http://howto.cnet.com/">CNET's How to</a></li>
            <li><a href="http://www.webstyleguide.com/wsg3/index.html">Web Style Guide</a></li>
            <li><a href="http://www.w3schools.com/">W3Schools Tutorials</a></li>
            <li><a href="http://www.codecademy.com/">Code Academy</a></li>
            <li><a href="http://projects.washingtonpost.com/fallen/">Other Lives</a></li>
          </ul>
        </div>
      </div>
      <div class="content">
        <h1 style="text-align:center;">Your Name</h1>
        <p>
          This web site is divided into a minimum of three areas, with a minimum of one of the areas having subordinate pages as well. Specifically, the areas are
        </p>
        <ol>
          <li>
            About me. This area may have subordinate pages for a fuller Curriculum Vitae or a résumé.
          </li>
          <li>
            Classes. This area will have subordinate pages for four tasks due as part of INLS161-001 [enter current semester here]
            <ul>
              <li>Markup</li>
              <li>Spreadsheets</li>
              <li>Relational Databases</li>
              <li>Presentational Graphics</li>
            </ul>
          </li>
          <li>
            Interests. This area may have subordinate pages for fuller explorations of personal interests.
          </li>
        </ol>
      </div>
    </div>
    <footer>
      <p>
        Copyright © Your Name 2018 |
        <a href="http://validator.w3.org/check?uri=referer">HTML5</a> |
        <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> |
        <a href="http://www.css3templates.co.uk">design from css3templates.co.uk</a>
      </p>
    </footer>
  </div>
  <p> </p>
</body>

They will look more interesting after you add some CSS to this page as part of task 02.02.

back to top

HTML - practice | theory | tags | links | HTML terms | 02.01 | next session