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
![Page 1: Web design 2 - Basic HTML 2010](https://reader036.fdocuments.us/reader036/viewer/2022081413/5472023fb4af9fc80a8b4d6d/html5/thumbnails/1.jpg)
www.le.ac.uk/studentdevelopment
Student Development
Creating a webpage – Basic HTML
Matthew Mobbs
web: http://www2.le.ac.uk/Members/mjm33
twitter: mjmobbs
![Page 2: Web design 2 - Basic HTML 2010](https://reader036.fdocuments.us/reader036/viewer/2022081413/5472023fb4af9fc80a8b4d6d/html5/thumbnails/2.jpg)
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
![Page 3: Web design 2 - Basic HTML 2010](https://reader036.fdocuments.us/reader036/viewer/2022081413/5472023fb4af9fc80a8b4d6d/html5/thumbnails/3.jpg)
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
![Page 4: Web design 2 - Basic HTML 2010](https://reader036.fdocuments.us/reader036/viewer/2022081413/5472023fb4af9fc80a8b4d6d/html5/thumbnails/4.jpg)
www.le.ac.uk/studentdevelopment
What is a page without a title!
<HTML><HEAD>
<TITLE>
</TITLE></HEAD>
</HTML>
Your name webpage
![Page 5: Web design 2 - Basic HTML 2010](https://reader036.fdocuments.us/reader036/viewer/2022081413/5472023fb4af9fc80a8b4d6d/html5/thumbnails/5.jpg)
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?
![Page 6: Web design 2 - Basic HTML 2010](https://reader036.fdocuments.us/reader036/viewer/2022081413/5472023fb4af9fc80a8b4d6d/html5/thumbnails/6.jpg)
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
![Page 7: Web design 2 - Basic HTML 2010](https://reader036.fdocuments.us/reader036/viewer/2022081413/5472023fb4af9fc80a8b4d6d/html5/thumbnails/7.jpg)
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
![Page 8: Web design 2 - Basic HTML 2010](https://reader036.fdocuments.us/reader036/viewer/2022081413/5472023fb4af9fc80a8b4d6d/html5/thumbnails/8.jpg)
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
![Page 9: Web design 2 - Basic HTML 2010](https://reader036.fdocuments.us/reader036/viewer/2022081413/5472023fb4af9fc80a8b4d6d/html5/thumbnails/9.jpg)
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>
![Page 10: Web design 2 - Basic HTML 2010](https://reader036.fdocuments.us/reader036/viewer/2022081413/5472023fb4af9fc80a8b4d6d/html5/thumbnails/10.jpg)
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
![Page 11: Web design 2 - Basic HTML 2010](https://reader036.fdocuments.us/reader036/viewer/2022081413/5472023fb4af9fc80a8b4d6d/html5/thumbnails/11.jpg)
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…”
![Page 12: Web design 2 - Basic HTML 2010](https://reader036.fdocuments.us/reader036/viewer/2022081413/5472023fb4af9fc80a8b4d6d/html5/thumbnails/12.jpg)
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
![Page 13: Web design 2 - Basic HTML 2010](https://reader036.fdocuments.us/reader036/viewer/2022081413/5472023fb4af9fc80a8b4d6d/html5/thumbnails/13.jpg)
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
![Page 14: Web design 2 - Basic HTML 2010](https://reader036.fdocuments.us/reader036/viewer/2022081413/5472023fb4af9fc80a8b4d6d/html5/thumbnails/14.jpg)
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>
![Page 15: Web design 2 - Basic HTML 2010](https://reader036.fdocuments.us/reader036/viewer/2022081413/5472023fb4af9fc80a8b4d6d/html5/thumbnails/15.jpg)
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
![Page 16: Web design 2 - Basic HTML 2010](https://reader036.fdocuments.us/reader036/viewer/2022081413/5472023fb4af9fc80a8b4d6d/html5/thumbnails/16.jpg)
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
![Page 17: Web design 2 - Basic HTML 2010](https://reader036.fdocuments.us/reader036/viewer/2022081413/5472023fb4af9fc80a8b4d6d/html5/thumbnails/17.jpg)
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
![Page 18: Web design 2 - Basic HTML 2010](https://reader036.fdocuments.us/reader036/viewer/2022081413/5472023fb4af9fc80a8b4d6d/html5/thumbnails/18.jpg)
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
![Page 19: Web design 2 - Basic HTML 2010](https://reader036.fdocuments.us/reader036/viewer/2022081413/5472023fb4af9fc80a8b4d6d/html5/thumbnails/19.jpg)
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
![Page 20: Web design 2 - Basic HTML 2010](https://reader036.fdocuments.us/reader036/viewer/2022081413/5472023fb4af9fc80a8b4d6d/html5/thumbnails/20.jpg)
www.le.ac.uk/studentdevelopment
Inserting Images
<P>
</P>
<CENTER>my -websitemy -website
modulesmodules
imagesimages
index.html
webdesign.html
html.gif
![Page 21: Web design 2 - Basic HTML 2010](https://reader036.fdocuments.us/reader036/viewer/2022081413/5472023fb4af9fc80a8b4d6d/html5/thumbnails/21.jpg)
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
![Page 22: Web design 2 - Basic HTML 2010](https://reader036.fdocuments.us/reader036/viewer/2022081413/5472023fb4af9fc80a8b4d6d/html5/thumbnails/22.jpg)
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
![Page 23: Web design 2 - Basic HTML 2010](https://reader036.fdocuments.us/reader036/viewer/2022081413/5472023fb4af9fc80a8b4d6d/html5/thumbnails/23.jpg)
www.le.ac.uk/studentdevelopment
Inserting object from other websites
http://tinyurl.com/2a68dgk
![Page 24: Web design 2 - Basic HTML 2010](https://reader036.fdocuments.us/reader036/viewer/2022081413/5472023fb4af9fc80a8b4d6d/html5/thumbnails/24.jpg)
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
![Page 25: Web design 2 - Basic HTML 2010](https://reader036.fdocuments.us/reader036/viewer/2022081413/5472023fb4af9fc80a8b4d6d/html5/thumbnails/25.jpg)
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=“…”
![Page 26: Web design 2 - Basic HTML 2010](https://reader036.fdocuments.us/reader036/viewer/2022081413/5472023fb4af9fc80a8b4d6d/html5/thumbnails/26.jpg)
www.le.ac.uk/studentdevelopment
Better looking website
http://www.le.ac.uk/oerresources/bdra/html/index.htm