Exercises - WebLearn · Exercises Exercise 1: Create the website folder and index page Create a...

12
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 Task 1 Use My Computer to create a folder for the website Step 1 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 Step 1 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 Step 1 Enter the following underneath the head section: <body> <h1>Hello</h1> </body> </html>

Transcript of Exercises - WebLearn · Exercises Exercise 1: Create the website folder and index page Create a...

Page 1: Exercises - WebLearn · 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

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

Task 1

Use My Computer to create a folder for the website

Step 1

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

Step 1

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

Step 1

Enter the following underneath the head section:

<body>

<h1>Hello</h1>

</body>

</html>

Page 2: Exercises - WebLearn · 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

Task 4

Save the web page in your folder

Step 1

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!

Page 3: Exercises - WebLearn · 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

Exercise 2: Adding Content to the webpage

Create some text

Create a link

Add a rule

Task 1

Continue to work with the document index.docx

Create a sub header, a line rule, and an image link

Step 1

The file you have been working on should be open and available for you to carry on working on.

Add 2nd 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

Step 1

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

Step 1

View site:

Save the document and view the changes by clicking on the preview button

Task 4

Create an external link to www.ox.ac.uk

Step 1

Add an external link

In the empty p tags enter:

<a href="http://www.ox.ac.uk" 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.

Task 5 Step 1

Add an <hr> tag:

On a new line under the <p> tags add another <hr> tag.

Page 4: Exercises - WebLearn · 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

Exercise 3: Add Navigation and links to social media

Create a navigation link

Add an image

Create new pages

Add links to social media

Task 1

Continue to work with the document index.docx

You will create your navigation system for the website!

Step 1

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 Step 1

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.

Task 3 Step 1

Add social media icons:

Under the last <hr> tag insert this Para 3 text from Text. docx:

<a href="http://uk.linkedin.com/company/university-of-oxford" target="new"><img src="images/LinkedIn.jpg"></a>

<a href="https://twitter.com/UniofOxford" target="new"><img src="images/Twitter.jpg"></a>

<a href="http://blogs.it.ox.ac.uk/engage/" target="new"><img src="images/WordPress.jpg"></a>

Page 5: Exercises - WebLearn · 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

Task 4 Step 1

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 Step 1

Add copyright sign:

Underneath the last link, on a new line type

<p class="copyright">&copy;Your Name 2014</p>

Exercise 4: Use CSS to style a page

Create a style page

Style a heading

Style text

Task 1

Create sty les.css

Save it in the same folder as your html files

Step 1

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

Task 2

We will give the body a percentage of the page and centre it

Step 1

Make rule for body:

body {width: 60%;

margin-left: auto;

margin-right: auto;

}

Page 6: Exercises - WebLearn · 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

Task 3

We will style text elements

Step 1

Make rule for h1:

h1 { font-family: Helvetica, Geneva, Arial,

SunSans-Regular, sans-serif; color: #26466d;

text-align: right;

font-weight: 100;

padding: 5px; }

Save and check

Make rule for H2

h2 {

font-family: Helvetica, Geneva, Arial,

SunSans-Regular, sans-serif; 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!

Step 1

Make rule for p:

p {

font-family: Helvetica, Geneva, Arial,

SunSans-Regular, sans-serif;

padding-left: 50px;

padding-right: 50px;

}

Page 7: Exercises - WebLearn · 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

Exercise 5: Lists and tables

Creating list

Creating a table

Centre the table

Task 1

Open publications.html

Step 1

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 Step 1

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 Step 1

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.

Page 8: Exercises - WebLearn · 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

Task 4 Step 1

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>email</h4></td>

<td><p>[email protected]</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>12345-1234566</p></td>

<td><p>evenings</p></td>

</tr>

</table>

Page 9: Exercises - WebLearn · 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

Exercise 6: Finish the CSS

Style the navigation links

Style the table and borders

Style the copyright notice

Task 1

Open the document styles .css

Step 1

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 {

font-family: Helvetica, Geneva, Arial,

SunSans-Regular, sans-serif;

color: #26466d;

text-align: center;

font-weight: 100;

padding: 10px }

h4 {

font-family: Helvetica, Geneva, Arial,

SunSans-Regular, sans-serif;

color: #26466d;

text-align: right;

font-weight: 100;

padding: 2px }

Page 10: Exercises - WebLearn · 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

Task 2 Step 1

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 {

font-family: Helvetica, Geneva, Arial,

SunSans-Regular, sans-serif;

color: #26466d;

text-align: center;

padding: 10px;

}

p.copyright {

font-family: Helvetica, Geneva, Arial,

SunSans-Regular, sans-serif;

font-size: small;

text-align: left;

padding: 0px;

}

Task 3 Step 1

Style the navigation link:

a.nav {font-family: Helvetica, Geneva, Arial,

SunSans-Regular, sans-serif;

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;}

Page 11: Exercises - WebLearn · 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

Task 4 Step 1

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 Step 1

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 {

font-family: Helvetica, Geneva, Arial,

SunSans-Regular, sans-serif;

}

Page 12: Exercises - WebLearn · 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

Exercise 7: Publish your site on Oxford hosting

Open FileZilla and connect to your web hosting

Upload your files

View your site

Task 1

Open the FileZilla program and fill in your webspace connection details

Step 1

This exercise assumes you have your university webhosting already setup. To do this quickly please refer to the online help at:

http://www.oucs.ox.ac.uk/web/personalwebpages/personalguide.xml?ID=webspace.

Open FileZilla program

Task 2 Step 1

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 Step 1

Drag your three html files, the css file and the image folder across to your public folder

Task 4 Step 1

Goto:

Users.ox.ac.uk/~ABCD0909 to see your website!

http://www.oucs.ox.ac.uk/web/personalwebpages/personalguide.xml?ID=webspace
http://www.oucs.ox.ac.uk/web/personalwebpages/personalguide.xml?ID=webspace

The Center for Teaching, Learning, & Technology...2. Navigate to the folder that will contain the new folder 3. On the Action Bar, click Create Folder. If the Create Folder function

The Center for Teaching, Learning, & Technology...2. Navigate to the folder that will contain the new folder 3. On the Action Bar, click Create Folder. If the Create Folder function

B3 Create a folder and add files to it 2020 v1

B3 Create a folder and add files to it 2020 v1

Asp.net create delete directory folder in c# vb.net

Asp.net create delete directory folder in c# vb.net

Creating a Public Folder Calendar - BlueEdge Consulting · Create Shared Calendar Public Folder in Outlook Right Click on the newly created folder and click Properties. You can now

Creating a Public Folder Calendar - BlueEdge Consulting · Create Shared Calendar Public Folder in Outlook Right Click on the newly created folder and click Properties. You can now

6.8.4.7 Lab - Share a Folder Create a Homegroup and Map a ... · 6.8.4.7 Lab - Share a Folder, Create a Homegroup, and Map a Network Drive ... in Document library, ... click Start

6.8.4.7 Lab - Share a Folder Create a Homegroup and Map a ... · 6.8.4.7 Lab - Share a Folder, Create a Homegroup, and Map a Network Drive ... in Document library, ... click Start

Create a personal geodatabase · 2018-06-28 · Create a file geodatabase From a folder connection Follow these steps to create a file geodatabase in a folder from ArcGIS for Desktop:

Create a personal geodatabase · 2018-06-28 · Create a file geodatabase From a folder connection Follow these steps to create a file geodatabase in a folder from ArcGIS for Desktop:

Paysera for Magento User Guide · 5. Magento extension 1) Backup your store. 2) Go to folder: /app/code If folder 'code' doesn't exsists, create it. 3) Create folder 'Paysera' and

Paysera for Magento User Guide · 5. Magento extension 1) Backup your store. 2) Go to folder: /app/code If folder 'code' doesn't exsists, create it. 3) Create folder 'Paysera' and

How-To Create a Folder - Weebly

How-To Create a Folder - Weebly

Create a list of all the Exercises “YOU Reduce down to ...

Create a list of all the Exercises “YOU Reduce down to ...

Tonya Skinner's Business Education Lesson Plans BELL ROCK... · Web viewJINGLE BELL ROCK (or not) FINAL WEB DESIGN 1 PROJECT Create a folder in the Projects folder and then create

Tonya Skinner's Business Education Lesson Plans BELL ROCK... · Web viewJINGLE BELL ROCK (or not) FINAL WEB DESIGN 1 PROJECT Create a folder in the Projects folder and then create

How to Create Google Drive Folder - Montana State University to Create Google … · Creating Google Drive Folder •Create a Google folder in Google Drive •Name the folder with

How to Create Google Drive Folder - Montana State University to Create Google … · Creating Google Drive Folder •Create a Google folder in Google Drive •Name the folder with

How to create a folder, create a folder inside it, and add collections

How to create a folder, create a folder inside it, and add collections

CREATE FOLDER - 3C Media Solutions

CREATE FOLDER - 3C Media Solutions

Lynn School Department Creating A Dropbox “Shared Folder”...Lynn School Department Creating A Dropbox “Shared Folder” . How to create a Dropbox folder and share files at .

Lynn School Department Creating A Dropbox “Shared Folder”...Lynn School Department Creating A Dropbox “Shared Folder” . How to create a Dropbox folder and share files at .

Setting up Eclipse PSC 120 Jeff Schank. Outline Find our user account Create “PSC120” Folder Create a “workspace” folder Link it to Eclipse Install Mason.

Setting up Eclipse PSC 120 Jeff Schank. Outline Find our user account Create “PSC120” Folder Create a “workspace” folder Link it to Eclipse Install Mason.

Copyright 2003, Paradigm Publishing Inc. CHAPTER 6 BACKNEXTEND 6-1 LINKS TO OBJECTIVES Create and Rename a Folder Create and Rename a Folder Delete Workbooks.

Copyright 2003, Paradigm Publishing Inc. CHAPTER 6 BACKNEXTEND 6-1 LINKS TO OBJECTIVES Create and Rename a Folder Create and Rename a Folder Delete Workbooks.

Create folder in microsoft office 365 share point using mule esb

Create folder in microsoft office 365 share point using mule esb

Promotions Notification Extension for Magento 2 · Create “Magebees” folder in your /app/code directory, if “ Magebees ” Folder not exist. Create

Promotions Notification Extension for Magento 2 · Create “Magebees” folder in your /app/code directory, if “ Magebees ” Folder not exist. Create

RAK EGA WEBCLIENT LOGINega.rak.ae/Documents/UserGuide.pdf · RAK EGA WEBCLIENT LOGIN Go to Secure Folder where users can upload,download,create folder and share the file or folder

RAK EGA WEBCLIENT LOGINega.rak.ae/Documents/UserGuide.pdf · RAK EGA WEBCLIENT LOGIN Go to Secure Folder where users can upload,download,create folder and share the file or folder

How to create a DEM from Sentinel-1 Data - ASF...Create a new folder for this step by entering a path and new folder name i. Type the folder directory in the Target Folder box. ii.

How to create a DEM from Sentinel-1 Data - ASF...Create a new folder for this step by entering a path and new folder name i. Type the folder directory in the Target Folder box. ii.