Web design 2 - Basic HTML 2010
-
Upload
matthew-mobbs -
Category
Education
-
view
1.162 -
download
0
description
Transcript of Web design 2 - Basic HTML 2010
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
HTML
• HyperText Markup Language
• The code used to write all websites
• Functions instruct web browsers what to show
• A little understanding will always help
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
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?
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” 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>
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
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 ‘html.gif’ and put in a folder called images
my -websitemy -website
modulesmodules
imagesimages
index.html
webdesign.html
html.gif
www.le.ac.uk/studentdevelopment
Insert hyperlink to file</BLOCKQUOTE>
<OL><LI>Module 1</LI><LI>Module 2</LI><LI>Writing for the Web</LI>
<H3>Module</H3>
<UL><LI><A HREF=“ modules/web-design.html” title=“Web Design”> Web Design </A></LI><LI>HTML</LI>
</UL>
my -websitemy -website
modulesmodules
imagesimages
index.html
webdesign.html
html.gif
www.le.ac.uk/studentdevelopment
Inserting Images
Open webdesign.html in Notepad
Try and understand the code
my -websitemy -website
modulesmodules
imagesimages
index.html
webdesign.html
html.gif
www.le.ac.uk/studentdevelopment
Inserting Images
<P>
</P>
<CENTER>my -websitemy -website
modulesmodules
imagesimages
index.html
webdesign.html
html.gif
www.le.ac.uk/studentdevelopment
Inserting Images
<P><IMG SRC=“../images/html.gif ”>
</P>
<CENTER>
IMG = IMaGe
SRC = SouRCe
Location of file.../ means go up
one level in structure
my -websitemy -website
modulesmodules
imagesimages
index.html
webdesign.html
html.gif
www.le.ac.uk/studentdevelopment
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
www.le.ac.uk/studentdevelopment
Inserting object from other websites
http://tinyurl.com/2a68dgk
www.le.ac.uk/studentdevelopment
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
www.le.ac.uk/studentdevelopment
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=“…”
www.le.ac.uk/studentdevelopment
Better looking website
http://www.le.ac.uk/oerresources/bdra/html/index.htm