Module1

Week 1 Module—Setting up Your Account & Building Your First Pages

Learning Objectives

  • To understand the basic concepts of web design
  • To learn the basics of html
  • To learn to set up a web account on sites.gsu.edu
  • To build a simple web page

Notes
HTML—There’re two kinds of basic tools for web design: coding languages (such as HTML, CSS, Java, Javascript, PHP, etc.) and WYSIWYG programs (such as WordPress, Wix, Squarespace, Weebly, Dreamweaver, etc.). Although it would be easier to use WYSIWYG programs, for this class, you’re encouraged to learn the coding language HTML. The basic rationale is that, as a technical writer dealing with digital content, you should know how things work behind the scenes. Understanding how the coding language works will give you more options in web design. For the final project, however, you may choose to use any tool you’d like (yes, WordPress will be perfectly fine).

Naming Your Files—File names in HTML are case sensitive. “default.html” is not the same as “Default.html.” The part after the . (aka dot) is called the file extension, and it tells computers how to handle the file. You will use .html for html files and .css for external style sheets. You can use either html or htm, but a file called “default.htm” is not the same file as one called “default.html” — small typographical differences can make all the difference on a server. File names should not have spaces. For example, instead of “my bio.html,” use  “my_bio.html.”

Paths and File Organization— A file’s path describes where a file is located within a website’s folder structure. You need to understand paths in order to organize and relocate files. When you build a website, even a small one, you can easily end up with hundreds of files. If you put all of your web files in one folder, without creating and using any sub-directories, you will end up with hundreds of files in just one place. If you know paths, you can effectively use subdirectories; put all images in an images folder, for example. File names are important. You should be able to recognize the contents of a file from its name tomorrow, a week, even a year from now. Think carefully. You can always rename files, but then you have to find and change every link to that renamed file.

Links—Links can be classified into two broad categories: internal/local links and external links. Internal links are those that link to your own files/pages. For example, if you have a file named “readings.html,” from your homepage, you can link directly to the file with the following code: <a href=“readings.html”>. The external links often refer to links to external websites. For example, if you want to include a link to CNN’s website, your code will look like this: <a href=“http://www.cnn.com>. In other words, for external links, you need to specify the complete path/url while for local links, you only need to specify the file name (and its folder name if it’s in a different folder).

These link methods apply to regular html editors, as you have learned from W3school tutorials. For WordPress in sites.gsu.edu, however, the way to create links is slightly different (see my instructions below). 

Your Web Space
Every student at GSU has access to web space at http://sites.gsu.edu. Your sign-in credentials will be your GSU campus id and password. You can use this space to build your portfolio or even a personal website. This is the space you can use to host all your English 3120 assignments. 

Of course, you can use an outside, commercial host such as Wix, Squarespace, etc. if you so choose. 

Task 1–Build Your First Page

  1. Go to W3school’s HTML tutorial and go through the following sections:
    HTML HOME
    HTML Introduction
    HTML Editors
    HTML Basic
    HTML Attributes
    HTML Headings
    HTML Paragraphs
    HTML Colors
    HTML Links
    HTML Lists
  2. Go to sites.gsu.edu and log in using your GSU campus id and password. 
  3. Once you have logged into your account, click on your name in the horizontal menu on top. You’ll now see a dropdown menu. 
  4. From the dropdown menu, select “Dashboard.” You’ll now see a side bar on the left with a vertical menu.  
  5. From the vertical menu, click on “Pages” and select “Add New.”
  6. In the Title field, enter “ENG3120.” You could certainly name it anything you want, but for the sake of consistency, let’s use the same title for this page.
  7. Design your homepage for this class.
    Important: In WordPress, there’re two different modes for designing your pages: 1) visual, which is the WYSIWYG (what you see is what you get) type of design, meaning you don’t have to write any code and it’s very much like designing in Microsoft Word; 2) text, which is coding directly with html. These two mode choices are on the top right corner of your page. You can toggle between the two freely.When in text (coding) mode in WordPress, there’s a major difference from coding with a regular text editor. The tutorials in W3School tell you that your coding for a regular html page must include the following tags: 

    <html>
    <head>
    <title>Your Page Title</title>
    </head>
    <body>
    All your page content goes here in between the two <body> tags.
    </body>
    </html>

    This is true with regular html text editors. In WordPress, however, the program is set up so that these page structural tags are already written for you and embedded in the design. So now you can start directly with coding whatever content that needs to go between the body tags. 

    With this understanding, now you can code/design your 3120 homepage, which should include all the assignments that will be linked to this page. Your homepage could look like the following:

    John Smith’s 3120 Homepage

    Reading Responses

    Assignments

    • Tagline analysis (5/11)
    • Focal point analysis (5/15)
    • Website analysis (5/18)

    Final Project

    Of course, you can design it differently if you’re comfortable enough with html coding or take advantage of WordPress’s existing templates and make your homepage look like the following:
    Sample 3120 Homepage

    Hint: To select the desired template for your site, go to Dashboard, then Appearance, then Theme. Now you can click and select whichever theme/template you like.

  8. Publish your page: When you’re done with designing your first page, scroll down until you find the “Publish” button on the right and click on it. Now your page is published online.
    To see the results, go to the horizontal menu on top and select “View Page.” To go back to the editing mode, simply click on “Edit Page.”
  9. Read my instructions on the final project (https://sites.gsu.edu/bgu/english-3120/projects/final-project/) and start thinking about what you want to do for the final project.
  10. Important: email me your url, which will be “http://sites.gsu.edu/yourcampusid.” Your email will not only give me the url but will also be an indication of your plan to stay in this class. If I don’t get this email from you, I’ll consider that you have opted to drop this course. 

Task 2–Build Your Reading Response Page 
Each week, you’ll read two chapters in Web Style Guide and write a summary for each chapter. For detailed instructions, go to my Projects page and follow the link to Reading Responses.

  1. Build a separate web page and name it “Reading Responses” in the title field. For instructions on how to create a new page, go back to my instructions for Assignment 1 above. For instructions on how to format this reading response page, go to my Projects page and follow the link to “Reading Responses.”
  2. Link your reading response page to your homepage. 
    1. On your homepage, highlight “Reading Responses.” In Text mode, click the “Link” button in the top horizontal menu (If you’re in the Visual mode, click on the chain link icon in the menu on top and then click on the options icon in the small pop-up window). You’ll now see a big pop-up window.
    2. From the pop-up window, simply select the correct file (at this point, if you haven’t created other files, your Reading Response should be the only file name there). Once the file is selected, a correct link path would automatically populate the URL field above.
    3. Click on “Add Link” located at the bottom right of the pop-up window. Now your link is created.
  3. Start reading Web Style Guide to get ready for your first reading response next week. 
  4. Continue thinking about what you plan to do for your final project.
  5. Go to Projects page and follow the link to the Tagline Analysis assignment. Read my instructions on this assignment and get started on it. 

Task 3–Complete Your Reading Responses for Chapters 1 and 2 of  Web Style Guide

  1. Read Web Style Guide Chapters 1 and 2 and complete your reading response. Please note that you need to complete a separate reading response for each chapter. 
  2. Post your reading responses to the Reading Response page you created in Task 2. 

Task 4–Complete Your Tagline Analysis Assignment

  1. Read my instructions on Tagline Analysis assignment. 
  2. Create a new page and name it “Tagline Analysis.”
  3. Post your analysis to the Tagline Analysis page you just created. 
  4. Link your Tagline Analysis page to your English 3120 Homepage.