Download - Creating a Webpage
www.le.ac.uk/studentdevelopment
Student Development
Creating a webpage – Basic HTML
Matthew Mobbs
web: http://www2.le.ac.uk/Members/mjm33
twitter: mjmobbs
www.le.ac.uk/studentdevelopment
Your first webpage
Open Notepad
<HTML> HTML always works in pairs!
Open and close!</HTML>
This mean it is a WWW page
www.le.ac.uk/studentdevelopment
What is a page without a title!
<HTML><HEAD>
<TITLE>
</TITLE></HEAD>
</HTML>
Your name webpage
www.le.ac.uk/studentdevelopment
Check your work…
File
Save As
Name the file
Save as .html
Open the file. It will open in
Internet Explorer.
Is the name is the Title Bar the same
as you typed?
www.le.ac.uk/studentdevelopment
Adding and Formatting the Page <BODY>
<HTML><HEAD>
<TITLE>
</TITLE></HEAD>
Your name webpage
</HTML>
<BODY>
</BODY>
The page content or body
www.le.ac.uk/studentdevelopment
Headings
<H1>Heading One</H1> Heading One<H2>Heading Two</H2> Heading Two
<H3>Heading Three</H3> Heading Three
<H4>Heading Four</H4> Heading Four
<H5>Heading Five</H5> Heading Five
We use different heading styles to break-up page content
Increased number
= Smaller heading
www.le.ac.uk/studentdevelopment
Add a Heading to your page <H1>
<BODY>
</BODY>
<H1>Your Name
</H1>
<CENTER>
</CENTER>
<HR>
Add Heading
Centre Text
Add a line
Save and Review your page
www.le.ac.uk/studentdevelopment
Writing a Paragraph <P>
<BODY>
</BODY>
<H1>Your Name
</H1>
<CENTER>
</CENTER>
<HR><P>
</P>
<P>Your name is doing a <STRONG>MA Humanities</STRONG> degree at the <I>University of Leicester</I>. Your name first degree was <B>Your degree</B> from <I>first degree institution</I>
</P>
www.le.ac.uk/studentdevelopment
Paragraph Mark-up
<P> Start Paragraph
<STRONG> Bold
<B> Bold
<I> Italics
<STRONG><I> Bold and Italics
</P> End Paragraph
www.le.ac.uk/studentdevelopment
“Quoting” <BLOCKQUOTE>
</P>
</BODY>
<P>“Your Quote”
</BR>
<BLOCKQUOTE>
<I>Says Your Name</I></P>
</BLOCKQUOTE>
In the quote say why you
chose to study this course…
“I’m studying MA
Humanities…”
www.le.ac.uk/studentdevelopment
Lists <OL> or <UL></BLOCKQUOTE>
</BODY>
<OL><LI>Module 1</LI><LI>Module 2</LI><LI>Writing for the Web</LI>
<H3>Modules</H3>
</OL>
<OL> is a numerical or ‘ordered’ list
Module1.Module 12.Module 23.Writing for the
web
www.le.ac.uk/studentdevelopment
Lists <OL> or <UL></BLOCKQUOTE>
</BODY>
<OL><LI>Module 1</LI><LI>Module 2</LI><LI>Writing for the Web</LI>
<H3>Module</H3>
</OL>
<UL><LI>Web Design</LI><LI>HTML</LI>
</UL>
<UL> is a bullet or ‘unordered’ list
3.Writing for the web• Web Design• HTML
www.le.ac.uk/studentdevelopment
Hyperlinks <A HREF=
<P>Your name is doing a <STRONG>MA Humanities</STRONG> degree at the <A HREF=“http://www.le.ac.uk”>
<I>University of Leicester</I></A>
. Your name first degree was <B>Your degree</B> from <I>first degree institution</I>
</P>
www.le.ac.uk/studentdevelopment
Structuring a Website
Home
About Us Resources Events
What the service is
Staff
Matt Mobbs
Writing
Maths
Essays
Future Events
Past Events
Handouts
www.le.ac.uk/studentdevelopment
Structuring a Website
About UsAbout Us
StaffStaff
Home
What the service is
Matt Mobbs
EventsEvents
Past Events
Past Events
Future Events
Handouts
ResourcesResources
WritingWriting
MathsMaths
Essays
www.le.ac.uk/studentdevelopment
Structuring a Website
About UsAbout Us
StaffStaff
Home
What the service is
Matt Mobbs
EventsEvents
Past Events
Past Events
Future Events
Handouts
ResourcesResources
WritingWriting
MathsMaths
Essays
ImagesImages
www.le.ac.uk/studentdevelopment
Download and structure your site
• Go to http://tinyurl.com/y9ev4rc
• Downloads the Page ‘webdesign.html’ and put in a folder called ‘modules’
• Download the image ‘htmlcode.png’ and put in a folder called images
my -websitemy -website
modulesmodules
imagesimages
index.html
webdesign.html
htmlcode.gif
www.le.ac.uk/studentdevelopment
Dreamweaver
A more sophisticated web editing package
To Install:1. Start2. All Programs3. CFS Software 24. Select & Remove Software5. Select Dreamweaver 8.0.2
from the list6. Add and Done
www.le.ac.uk/studentdevelopment
Getting started with Dreamweaver
From the Files list select
‘Manage Sites’
www.le.ac.uk/studentdevelopment
Getting started with Dreamweaver
When the pop-up box appears select New…
www.le.ac.uk/studentdevelopment
Getting started with Dreamweaver
1. Go to the Advanced options
2. Name your site ‘My Website’
3. Locate the folder you created containing your website
4. Locate the image folder
5. Select OK
www.le.ac.uk/studentdevelopment
Features of Dreamweaver
Open index.html
Select ‘Split’
www.le.ac.uk/studentdevelopment
Features of Dreamweaver
Top: HTML code
Top: How it will appear online
Text can be formatted using
toolbar. E.g. colour and size
www.le.ac.uk/studentdevelopment
Insert Hyperlink to Subpages
1. Open index.html2. Highlight the words ‘Writing for the Web’ in the Module
list
3. Select the ‘browse’ icon in the ‘Link’ creator in the Properties toolbar.
4. Browse to webdesign.html in the modules folder of your website and select
www.le.ac.uk/studentdevelopment
Hyperlink HTML
<LI><a href=“module/webdesign.html”>Writing for the Web</a></LI>
Complete the link…add title
You can see the website structure in the link…folder/page
<LI><a href=“module/webdesign.html” title=”Writing for the Web">Writing for the Web</a></LI>
This instructs user what the link will open, used by users with visual impairments
www.le.ac.uk/studentdevelopment
Insert Image1. Open webdesign.html2. Place the cursor at the bottom of the page.3. Select: Insert -> Image4. Browse to the htmlcode.png image you downloaded and select.5. When this box appears complete the Alternate text with ‘Basic
HTML’.
ALT describes what the images is, used by screen readers to
assist visually impaired users
<img src="../image/html.png" alt="Basic HTML”>
www.le.ac.uk/studentdevelopment
Complete the image
<CENTER><P>
<img src="../image/html.png" alt="Basic HTML" BORDER="2px"> </P></CENTER>
Add a Boarder
<CENTER><P>
<img src="../image/html.png" alt="Basic HTML" BORDER="2px"> </P><H4>Basic HTML</H4></CENTER>
Name the image“2px” how many pixels
wide the boarder is.
www.le.ac.uk/studentdevelopment
Hyperlink back to homepage
1. On the webdesign.html page, in the HTML code, below the image add:
</H4> <P> RETURN HOME </P> </CENTER>
2. Highlight the word RETURN HOME. Add the link to index.html
3. In the HTML add your ‘title’
www.le.ac.uk/studentdevelopment
Note the link
<a href="../index.html" title="MA Humanities Home">RETURN HOME</a>
../ means ‘go up a level’ in the folder structure
www.le.ac.uk/studentdevelopment
Larger structures
About UsAbout Us
StaffStaff
Home
What the service is
Matt Mobbs
EventsEvents
Past Events
Past Events
Future Events
Handouts
ResourcesResources
WritingWriting
MathsMaths
Essays
ImagesImages
Link from ‘Matt Mobbs’ to ‘Home’
../../HOME
Need to go up two level = 2 x ../
www.le.ac.uk/studentdevelopment
Larger structures
About UsAbout Us
StaffStaff
Home
What the service is
Matt Mobbs
EventsEvents
Past Events
Past Events
Future Events
Handouts
ResourcesResources
WritingWriting
MathsMaths
Essays
ImagesImages
Link from ‘Matt Mobbs’ to ‘Home’
../../HOME
Need to go up two level = 2 x ../
Same applies to images<img src="../../image/matt.jpg”>
Up two, down one
www.le.ac.uk/studentdevelopment
Better looking website
http://www.oswd.org/