Web design 2 - Basic HTML 2010

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


HTML

• HyperText Markup Language

• The code used to write all websites

• Functions instruct web browsers what to show

• A little understanding will always help



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



Save

Check your work…

File

Save As

Name the file ‘index.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>


<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” title=“University of Leicester”>

<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



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



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 ‘html.gif’ and put in a folder called images

my -websitemy -website

modulesmodules

imagesimages

index.html

webdesign.html

html.gif


http://tinyurl.com/y9ev4rc


Insert hyperlink to file</BLOCKQUOTE>


<H3>Module</H3>

<UL><LI><A HREF=“ modules/web-design.html” title=“Web Design”> Web Design </A></LI><LI>HTML</LI>

</UL>


modulesmodules

imagesimages

index.html

webdesign.html

html.gif



Inserting Images

Open webdesign.html in Notepad

Try and understand the code


modulesmodules

imagesimages

index.html

webdesign.html

html.gif



Inserting Images

<P>

</P>

<CENTER>my -websitemy -website

modulesmodules

imagesimages

index.html

webdesign.html

html.gif



Inserting Images

<P><IMG SRC=“../images/html.gif ”>

</P>

<CENTER>

IMG = IMaGe

SRC = SouRCe

Location of file.../ means go up

one level in structure


modulesmodules

imagesimages

index.html

webdesign.html

html.gif



Inserting Images

<P><IMG SRC=“../images/html.gif ” alt=“Basic HTML Code”>

</P>

<CENTER>my -websitemy -website

modulesmodules

imagesimages

index.html

webdesign.html

html.gif

alt = Alternative text

Used by visually impaired users, descirbes what the image is.

VERY IMPORTANT



Inserting object from other websites

http://tinyurl.com/2a68dgk


http://tinyurl.com/2a68dgk


Inserting object from other websites

<LI>Four Key Elements of web design</LI> <UL>

<LI>Presentation</LI> <LI>Structure</LI> <LI>Writing Style</LI> <LI>Referencing and Illustration</LI> </UL> <INSERT YOUTUBE CODE HERE></OL><H3>

In webdesign.html



Key learning

• HTML code always works in pairs

• Code for Paragraphs <P>, Headings <H1> and List <OL> or <UL>

• Hyperlink <A HREF=“…”

• Image <IMG SRC=“…”,

• Images must have alternative text - alt=“…”



Better looking website

http://www.le.ac.uk/oerresources/bdra/html/index.htm





Education

Web design 2 - Basic HTML 2010