Week 1—Setting up Your Account
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.”
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.
Assignment 1–Creating Your 3120 Homepage
- Go to W3school’s HTML tutorial and go through the following sections:
- HTML HOME
- HTML Introduction
- HTML Editors
- HTML Basic
- Go to sites.gsu.edu and log in using your GSU campus id and password.
- Once you have logged into your account, click on your name in the horizontal menu on top. You’ll now see a dropdown menu.
- From the dropdown menu, select “Dashboard.” You’ll now see a side bar on the left with a vertical menu.
- From the vertical menu, click on “Pages” and select “Add New.”
- 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.
- 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 (of course, you can design it differently if you’re comfortable enough with html coding):
John Smith’s 3120 Homepage
Reading Responses
Assignments
- Tagline analysis (5/11)
- Focal point analysis (5/15)
- Website analysis (5/18)
Final Project
- 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.”
Assignment 2–Email me your url
Once you’re done setting up your account and your first page, email me your url, which, in most cases, will look like the following: “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.
Assignment 3–Creating and Linking Your Reading Response Page
Now you can create your second page by following the steps below:
- 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 above for creating your 3120 homepage.
- 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.
- 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.
- Click on “Add Link” located at the bottom right of the pop-up window. Now your link is created.
Assignment 4–Complete your first reading response
- Read chapter 1 in Web Style Guide .
- Post your reading summary/response in your Reading Response page.
Assignment 5–Start preparing for your final project
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.