Exercises. Task 1 Use My Computer to create a folder for the website. Step 1

Size: px

Start display at page:

Download "Exercises. Task 1 Use My Computer to create a folder for the website. Step 1"

Kristian Walters
5 years ago
Views:

1 Exercises Exercise 1: Create the website folder and index page Create a folder for the local copy of the website Use BlueFish to create the first webpage Use a browser (Firefox) to view your page Use My Computer to create a folder for the website Double click on the My Computer icon on the desktop and navigate to the drive ending in H:// In the H drive right click and choose new folder option Create and name a folder with your choice that will become the holder for your website (locally) Task 2 Open Bluefish And enter the root and head sections of your first html document Click on the start button and find the Bluefish entry in All Programs. Double click to start the program Step 2 In BlueFish, click on the new document icon in the top left of the program window Step 3 Enter the following: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title>my Bespoke Website</title> <link rel="stylesheet" href="styles.css" /> </head> Task 3 Enter the body section of your first webpage Enter the following underneath the head section: <body> <h1>hello</h1> </body> </html>

Task 4 Save the web page in your folder Click on the save icon towards the top left of the program window Name your file index.html This follows web protocol of naming the home page index.

2 Task 4 Save the web page in your folder Click on the save icon towards the top left of the program window Name your file index.html This follows web protocol of naming the home page index. In the Save in Folder path, navigate to your website folder. Click save. You should immediately see that your file has taken on the correct colour coding for a html file. Task 5 View your webpage! In the program interface, click on the browser view to open up Firefox and view your webpage. Enjoy!

3 Exercise 2: Adding Content to the webpage Create some text Create a link Add a rule Continue to work with the document index.docx Create a sub header, a line rule, and an image link The file you have been working on should be open and available for you to carry on working on. Add 2 nd header: Underneath the <h1> entry on a new line type <h2>supporting my teaching and research</h2> or content of your own choice Add hr tag: On the next line type <hr> Task 2 Create <p> tags to add prose Add prose in 2 P tags: On the next line type <p></p> and insert the para 1 text from the Text.docx file in the H drive Create another set of p tages on the next line and then another after that on a new line and copy the para 2 text from Text.docx Task 3 Use preview to view the site View site: Save the document and view the changes by clicking on the preview button Task 4 Create an external link to Add an external link In the empty p tags enter: Task 5 <a href=" target="new">university of Oxford</a> Look carefully at this link to an external website and see if you can identify the elements. Try swapping in another website of your choosing. Don t forget to change the description. Add an <hr> tag: On a new line under the <p> tags add another <hr> tag.

4 Exercise 3: Add Navigation and links to social media Create a navigation link Add an image Create new pages Add links to social media Continue to work with the document index.docx You will create your navigation system for the website! Add another hr tag under the first one on the page Create a space between them in BlueFish by clicking return after the first tag. In the line in-between enter: <p class="nav"> <a class="nav" href="index.html" target="new">home</a> <a class="nav" href="biography.html" target="new">biography</a> <a class="nav" href="publications.html" target="new">publications</a> </p> Add the image: <img src="images/stevepicforitlp.jpg" alt="pic of me"> Task 2 Task 3 Save as twice to create the linked pages: Use the File, Save As command to save the file twice as biography.html and publications.html - all in the same folder as the index.html Change page title and header one on the new pages: Edit the new pages so the Title ends in /biography or /publications. Change the <h1> tag so it says biography or publications. Remove the <h2> tags in the new biography.html and publications.html Save all files and pre view the site to make sure the links are all working. Add social media icons: Under the last <hr> tag insert this Para 3 text from Text. docx: <a href=" target="new"><img src="images/linkedin.jpg"></a> <a href=" target="new"><img src="images/twitter.jpg"></a> <a href=" target="new"><img src="images/wordpress.jpg"></a>

5 Task 4 Link to your own or university sites: If you have your own social media presence on these sites, see if you can swap out the links to insert your own. Task 5 Add copyright sign: Underneath the last link, on a new line type <p class="copyright"> Your Name 2014</p> Exercise 4: Use CSS to style a page Create a style page Style a heading Style text Create styles.css Save it in the same folder as your html files Task 2 We will give the body a percentage of the page and centre it Create ctyles.css: Choose File, New, to open a new blank document in BlueFish. Choose File, Save and save to the same folder as the html files you have created as styles.css Make rule for body: body {width: 60%; margin-left: auto; margin-right: auto;

6 Task 3 We will style text elements Make rule for h1: h1 { color: #26466d; text-align: right; font-weight: 100; padding: 5px; Save and check Make rule for H2 h2 { color: #26466d; text-align: center; font-weight: 100; padding: 15px; Task 4 See how much is similar in each rule copy and paste rules to save time! Make rule for p: p { padding-left: 50px; padding-right: 50px;

7 Exercise 5: Lists and tables Creating list Creating a table Centre the table Open publications.html In publications.html remove prose: Select the text that came from the index.html page and delete it. Enter the text in para 4 in Text.docx Create book, journal headers etc: After the <hr> tag you just inserted, enter 4 <h3> tag sets with the following titles: <h3>books</h3> <h3>chapters in books</h3> <h3>journal articles</h3> <h3>conference papers</h3> Task 2 Create lists under headers: Put the 4 lists in Para 5 in Text.docx under each heading you have just created. Look at the tags to see how easy it is to create lists and list items Add to lists with your own publications: Try and add to these lists with entries of your own. If you have your own publications use these. Don t forget <ol></ol> is the tag for an ordered list which will give numbering as a default. Try changing a pair of these tags to <ul></ul> to create a bulleted list. Note the use of <i> and <b>tags to add emphasis or and alternate emphasis to text. Code some text with these tags to see the effects. Save publications.html and preview the changes in Firefox. Task 3 Open biography.html: Select the text in the paragraphs that came from index.html and delete them. Insert the text from Para 6 in Text.docx in its place.

8 Task 4 Create a table: Underneath the prose enter this table. The table is probably the most fiddly simple html element to code but it can give you some nice visual options as we shall see when we add the CSS for it. <table class="center"> <tr> <td><h4>contact</h4></td> <td><h4>details</h4></td> <td><h4>when</h4></td> </tr> <tr> <td><h4> </h4></td> <td><p>doctor@ox.ac.uk</p></td> <td><p>term only</p></td> </tr> <tr> <td><h4>office</h4></td> <td><p>73010</p></td> <td><p>term: 9am-5pm</p></td> </tr> <tr> <td><h4>mobile</h4></td> <td><p> </p></td> <td><p>evenings</p></td> </tr> </table>

9 Exercise 6: Finish the CSS Style the navigation links Style the table and borders Style the copyright notice Open the document styles.css Style more headings: Don t forget that once you have created one heading rule you can copy it and make the minor changes necessary. h3 { color: #26466d; text-align: center; font-weight: 100; padding: 10px h4 { color: #26466d; text-align: right; font-weight: 100; padding: 2px

10 Task 2 Style the p classes: To get paragraphs to behave in slightly different ways we have used classes as discussed in the lesson. We now have to give these classes their own css rules. p.nav { color: #26466d; text-align: center; padding: 10px; p.copyright { font-size: small; text-align: left; padding: 0px; Task 3 Style the navigation link: a.nav { color: #26466d; font-size: 1em; text-align: center; text-decoration: none; font-weight: 100; We can change the behaviour of the links when we hover the mouse over them with this css: a:hover {color: orange;

11 Task 4 Style the contact table first we centre the table: table.center { margin-left:auto; margin-right:auto; Then we give the table its distinctive border design: td {padding: 5px; border-right: 1px dotted black; border-bottom: 1px dotted black; Task 5 Finally, lets just style those lists to give them space and the same font as the paragraph text. Firsts the <ol>: ol { padding: 50px; And the <ul>: ol { padding: 50px; And then the text for the list items - <li>: Li {

12 Exercise 7: Publish your site on Oxford hosting Open FileZilla and connect to your web hosting Upload your files View your site Open the FileZilla program and fill in your webspace connection details This exercise assumes you have your university webhosting already setup. To do this quickly please refer to the online help at: space. Open FileZilla program Task 2 Fill in your connection details as follows: Host Name: linux.ox.ac.uk Port: 22 Username: Your Oxford Account Username e.g.oucs1234 Password: Your Oxford Account password You will now see your linux.ox.ac.uk account space. Inside this are your cgi and public_html folders. Click public_html to view your web site You can now transfer files to and from your web site using your SFTP client (FileZilla is used widely). Task 3 Task 4 Drag your three html files, the css file and the image folder across to your public folder Goto: Users.ox.ac.uk/~ABCD0909 to see your website!

CSS Exercises. Create a basic CSS layout Use BlueFish to open layout.html Create a layout using <div> tags Use a browser (Firefox) to view your page

CSS Exercises. Create a basic CSS layout Use BlueFish to open layout.html Create a layout using <div> tags Use a browser (Firefox) to view your page CSS Exercises Exercise 1: Create a basic CSS layout Use BlueFish to open layout.html Create a layout using tags Use a browser (Firefox) to view your page Task 1 Open layout.html in BlueFish a blank