Creating Your Web Site

Transcription

1 Creating Your Web Site Students who are serious about wanting to be writers must create their own web sites to display their work. This is what professionals want to see an easy place to access your work online when they consider you for an internship or a job. It s also a good place to promote your work. It s easy to do, and numerous sites allow you to do it for free. This tutorial uses the site Weebly. You can adapt the lessons here to other sites, but Weebly is pretty easy for the beginner. Go here to see what your site might look like with your name at the top, of course: To create your web site, you need to follow the basic instructions on Weebly and also know some HTML coding. Weebly doesn t teach you that. I ll teach it here. Okay, let s get started. Follow these instructions, step by step. 1. Go to and create an account with a user ID and password. Follow instructions to activate your account. 2. When your account is activated, click the link that says Create a Site and fill in the name of your site on the line that will appear. I recommend naming your site after yourself. That makes you more easily searchable. 3. Once you create your site, it will appear under a menu. Click on the site name to get into the editing program that will allow you to design your site and add links to your stories. 4. Under Designs at the top, look them over and find one that you like. Placing your cursor over one allows you to see what it will look like. Clicking on it makes it your design, although you can change as easily as following the instructions for point #4, over and over, as many times as you want to change it. When you ve selected your design, click the orange Publish button at the top of the screen. A new screen will congratulate you on having created your new design. You can click the link on that screen if you want to see it, or you can just click the little x to close the screen. 5. Now you need to add pages to your site. These pages will appear in the menu on your design. At the Pitt News Sampler site, the pages are: News, Opinions, Arts & Entertainment, Sports, Multimedia, Résumé. You ll definitely want a Résumé page. The others will depend upon what you do for the paper. If you write news, you may want to have pages for News Stories and Feature Stories. If you write for Opinions, just Columns should do it. For A&E, maybe you want a page for Features, one for Reviews, and one for columns. For Sports: Game Coverage, Sports News, Column. For

2 multimedia, appropriate sections that represent your work. For photography, perhaps News Photos and Feature Photos. Create these pages by clicking the Pages link at the top of your editing screen. Enter the name of the page, then click Save. Create your next page by clicking New Page and repeating the procedure. If they don t come out in the order you want them to be in the index, just grab and drag a file to move it up or down. Home should be at the top of your pages, of course. I d recommend that Résumé be at the bottom. * * * * * * * * * * * * * * * * * * * * * * * * * * * Now, it gets trickier, but just a little. You want to put stories on each page. These stories will appear in the form of links to your work in The Pitt News. In this section of the tutorial, you ll learn how to use Weebly to place those links and HTML to code them. HTML stands for hypertext markup language. These are the code that allow your computer to read pages on the web. Here, you ll learn HMTL basics to get you started. You can then explore and expand your skills. Here s what to do: 1. With the tutorial page on your computer screen, click on the page that you want to update. Let s say you want to add some links to your News Stories. Click on that link. Your screen will say This Page Is Empty. Drag Elements Here. 2. At the top of the screen, toward the right, look for Custom HTML. Grab it with your cursor and drag it to the white space above the words This Page Is Empty. 3. Now, place your cursor over the words Click to set custom HMTL, and click on those words. A small blue rectangle will appear, right on or above the name of your site. On that rectangle, click Edit Custom HTML. This activates the editing screen below. Delete the words Click to set custom HTML. You don t want them to appear on your site. 4. Now you re in your clean editing screen, and you want to put links there. So: Open a new browser window and go to Then, search for your stories by entering your name in the search engine. A bunch of your work will come up. 5. Let s say you ve found a story that you want to put under your News Stories page. Click on the link for the story after your search. When it opens, you will see the URL (universal resource locator) at the top. Every story will have a URL with a unique number at the end. It will look something like this: Highlight and copy this URL.

3 6. Return to the News Stories page onto which you want to place a link to this story. Click Edit Custom HTML to re-activate the screen, then paste the URL that you copied into the editing space (surrounded by a blue border). 7. With that URL in place, you want to make it look exactly like this: <a href = target = _new >TYPE A STORY HEADLINE HERE</a> That stuff in brackets is HTML coding. Again, follow this syntax (pattern) exactly. Open with the greater than brackets, then type a href = and so forth. Space where you see a space on the example, put quotation marks exactly where you see them, and so forth. The STORY HEADLINE HERE should be either the story s actually headline or a few words of your choosing to describe the story. Close the sequence with </a>, then add the on the line below. This creates a break for your next line of material. If you like, you can add a one-sentence description of the story After the about HEADLINE link. Just type the words as you normally would, then put after the description. For example: <a href = target = _new >SGB Votes to Ban Final Exams</a> In a startling move, Pitt s Student government board will petition the university to do away with all finals. And now you have a link (and possibly a short description of the story after it). 8. Finally: Click Publish. Again, a screen will appear to tell you that you ve succeeded. For your own peace of mind, click on your site s URL, then click on the page that you just updated. You ll see your new links. Click on them to make sure you got all of the coding correct. If you didn t, then just go back and fix it. Follow these steps to keep adding links as the term and the years go on. When you publish a new story that you like, add it to the appropriate page. I d recommend putting newer stories at the top, or perhaps putting your best stories at the top. Finally, creating your résumé isn t as easy as copying links that take you to formatted stories on The Pitt News web site. When you use the Custom HTML editing box, you ll need to know some basic HTML coding. Here are a few key codes: 1. To center something put <center> before the words you want to center and </center> when you want it to end.

4 2. To put something in boldface, the code is <b> before the words and </b> after. 3. For italics: <em> before and </em>. 4. To create spaces between lines, as you already know:. To make a new paragraph, type <p>. 5. To make your words (your name perhaps) bigger: <h2> before the words, and </h2> after them. This uses a slightly larger headline font. You can find many sites online that tell you more HTML codes and show you how to use them. This should get your started. * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * Finally, let s say you want to include a piece of writing that you didn t publish in The Pitt News. If you published it somewhere else online, then simply follow the instructions above for creating an href URL link to The Pitt News story, but substitute the URL of the other publication. But if this is a piece of writing that you did for a class, and you haven t published it, then there is a way to create a link to a page that will display it on your Weebly web site. Do this: 1. Under the Pages link, click New Page and give your story a short name. I d recommend using something like story1 and story2 and so forth. Remember this name! 2. On the Pages page, look for the option that says Show in Navigation, and set it to No. The default setting is yes. 3. Click Save and it will appear in your list of pages on the left. Drag it to the bottom. 4. Now, highlight that new page and click the blue Edit This Page button. When the page opens, drag the Custom HTML box into it, click inside the box, and click Edit this page. You should be familiar with all of this from your earlier work. 5. The editing box is now activated. So: Copy the story from your Word file and paste it into this block. You re almost done.

5 6. Finally, you must add some HTML codes. Between each paragraph, use the <p> code. If you want any words in the story to be bold or italics, use the proper codes before and after them. If you want a headline and byline at the top, do it like this above the text of the story: <h2>here s a Great Story I Wrote for a Class</h2> <br> <b>by Chris Schreiber</b> So now you have a headline at the top in a larger font size, your boldface byline beneath it, and the story following, all properly coded to make paragraph breaks. 7. Now: Click the Publish button at the top of the screen. 8. Finally, you need to create a link for it so people can find it. Let s say this is a feature story. Go back to Pages, highlight Feature Stories, click Edit This Page, and using what you already know from the instructions above, create the link. Your URL will end with the name of the story: This is why you need to remember the name of the page: so you can end your URL with that name, followed by a dot, followed by html. After you ve added this link, click Publish, just as you always do when updating a page. By doing all of this, you ve created a page that people can only see by clicking the link in the proper index. You can do this for as many unpublished stories as you like.