Creating a Webpage

www.le.ac.uk/studentdevelopment

Student Development

Creating a webpage – Basic HTML

Matthew Mobbs

e: [email protected]

web: http://www2.le.ac.uk/Members/mjm33

twitter: mjmobbs

http://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



What is a page without a title!

<HTML><HEAD>

<TITLE>

</TITLE></HEAD>

</HTML>

Your name webpage



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?



Adding and Formatting the Page <BODY>

<HTML><HEAD>

<TITLE>

</TITLE></HEAD>

Your name webpage

</HTML>

<BODY>

</BODY>

The page content or body



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



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



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>



Paragraph Mark-up

<P> Start Paragraph

<STRONG> Bold

<B> Bold

<I> Italics

<STRONG><I> Bold and Italics

</P> End Paragraph



“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…”



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



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



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>



Structuring a Website

Home

About Us Resources Events

What the service is

Staff

Matt Mobbs

Writing

Maths

Essays

Future Events

Past Events

Handouts




About UsAbout Us

StaffStaff

Home

What the service is

Matt Mobbs

EventsEvents

Past Events

Past Events

Future Events

Handouts

ResourcesResources

WritingWriting

MathsMaths

Essays




About UsAbout Us

StaffStaff

Home

What the service is

Matt Mobbs

EventsEvents

Past Events

Past Events

Future Events

Handouts

ResourcesResources

WritingWriting

MathsMaths

Essays

ImagesImages



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


http://tinyurl.com/y9ev4rc


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



Getting started with Dreamweaver

From the Files list select

‘Manage Sites’




When the pop-up box appears select New…




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



Features of Dreamweaver

Open index.html

Select ‘Split’



Features of Dreamweaver

Top: HTML code

Top: How it will appear online

Text can be formatted using

toolbar. E.g. colour and size



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



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



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”>



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.



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’



Note the link

<a href="../index.html" title="MA Humanities Home">RETURN HOME</a>

../ means ‘go up a level’ in the folder structure



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 ../



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



Better looking website

http://www.oswd.org/


Creating a Webpage

Education

Transcript of Creating a Webpage