Web design 2 - Basic HTML 2010

1,126 views

Published on

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,126
On SlideShare
0
From Embeds
0
Number of Embeds
271
Actions
Shares
0
Downloads
26
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Web design 2 - Basic HTML 2010

  1. 1. Creating a webpage – Basic HTML<br />Matthew Mobbs<br />e: mjm33@le.ac.uk<br />web: http://www2.le.ac.uk/Members/mjm33<br />twitter: mjmobbs<br />
  2. 2. HTML<br />HyperTextMarkup Language<br />The code used to write all websites<br />Functions instruct web browsers what to show<br />A little understanding will always help<br />
  3. 3. Your first webpage<br />Open Notepad<br /><HTML><br />HTML always works in pairs! <br />Open and close!<br /></HTML><br />This mean it is a WWW page<br />
  4. 4. What is a page without a title!<br /><HTML><br /> <HEAD><br /> <TITLE> <br />Your name webpage<br /> </TITLE><br /> </HEAD><br /></HTML><br />
  5. 5. Check your work…<br />File<br />Open the file. It will open in Internet Explorer.<br />Is the name is the Title Bar the same as you typed?<br />Save As<br />Name the file ‘index.html’<br />Save<br />
  6. 6. Adding and Formatting the Page <BODY><br /><HTML><br /> <HEAD><br /> <TITLE> <br />Your name webpage<br /> </TITLE><br /> </HEAD><br /> <BODY><br />The page content or body<br /> </BODY><br /></HTML><br />
  7. 7. Headings<br />We use different heading styles to break-up page content<br />Increased number<br /> = <br />Smaller heading<br />
  8. 8. Add a Heading to your page <H1><br /><BODY><br />Add Heading<br /> <CENTER><br /> <H1><br />Your Name<br /> </H1><br />Centre Text<br /> </CENTER><br />Add a line<br /> <HR><br /></BODY><br />Save and Review your page<br />
  9. 9. Writing a Paragraph <P> <br /><P><br />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><br /></P><br /><BODY><br /> <CENTER><br /> <H1><br />Your Name<br /> </H1><br /> </CENTER><br /> <HR><br /> <P><br /> </P><br /></BODY><br />
  10. 10. Paragraph Mark-up<br />
  11. 11. “Quoting” <BLOCKQUOTE><br /></P><br />In the quote say why you chose to study this course…<br />“I’m studying MA Humanities…” <br /> <BLOCKQUOTE><br /> <P><br />“Your Quote”<br /> </BR><br /> <I>Says Your Name</I><br /> </P><br /> </BLOCKQUOTE><br /></BODY><br />
  12. 12. Lists <OL> or <UL><br /></BLOCKQUOTE><br /><OL> is a numerical or ‘ordered’ list<br />Module<br />Module 1<br />Module 2<br />Writing for the web<br /><H3>Modules</H3><br /><OL><br /> <LI>Module 1</LI><br /> <LI>Module 2</LI><br /> <LI>Writing for the Web</LI><br /></OL><br /></BODY><br />
  13. 13. Lists <OL> or <UL><br /></BLOCKQUOTE><br /><UL> is a bullet or ‘unordered’ list<br />Writing for the web<br /><ul><li>Web Design
  14. 14. HTML</li></ul><H3>Module</H3><br /><OL><br /> <LI>Module 1</LI><br /> <LI>Module 2</LI><br /> <LI>Writing for the Web</LI><br /> <UL><br /> <LI>Web Design</LI><br /> <LI>HTML</LI><br /> </UL><br /></OL><br /></BODY><br />
  15. 15. Hyperlinks <A HREF=<br /><P><br />Your name is doing a <STRONG>MA Humanities</STRONG> degree at the<br /><A HREF=“http://www.le.ac.uk” title=“University of Leicester”><br /><I>University of Leicester</I><br /></A><br />. Your name first degree was <B>Your degree</B> from <I>first degree institution</I><br /></P><br />
  16. 16. Structuring a Website<br />Home<br />About Us<br />Events<br />Resources<br />What the service is<br />Writing<br />Future Events<br />Staff<br />Essays<br />Past Events<br />Matt Mobbs<br />Maths<br />Handouts<br />
  17. 17. Structuring a Website<br />Home<br />About Us<br />Resources<br />Images<br />Events<br />Writing<br />What the service is<br />Future Events<br />Staff<br />Past Events<br />Essays<br />Matt Mobbs<br />Handouts<br />Maths<br />
  18. 18. Download and structure your site<br />my -website<br />Go to http://tinyurl.com/y9ev4rc<br />Downloads the Page ‘webdesign.html’ and put in a folder called ‘modules’ <br />Download the image ‘html.gif’ and put in a folder called images<br />index.html<br />modules<br />webdesign.html<br />images<br />html.gif<br />
  19. 19. Insert hyperlink to file<br />my -website<br /></BLOCKQUOTE><br /><H3>Module</H3><br /><OL><br /> <LI>Module 1</LI><br /> <LI>Module 2</LI><br /> <LI>Writing for the Web</LI><br />index.html<br />modules<br /><UL><br /> <LI><AHREF=“ modules/web- design.html” title=“Web Design”> Web Design </A></LI><br /> <LI>HTML</LI><br /> </UL><br />webdesign.html<br />images<br />html.gif<br />
  20. 20. Inserting Images<br />my -website<br />Open webdesign.html in Notepad<br />index.html<br />modules<br />Try and understand the code<br />webdesign.html<br />images<br />html.gif<br />
  21. 21. Inserting Images<br />my -website<br /><CENTER><br /><P><br /></P><br />index.html<br />modules<br />webdesign.html<br />images<br />html.gif<br />
  22. 22. Inserting Images<br />my -website<br /><CENTER><br /><P><br /><IMG SRC=“../images/html.gif ”><br /></P><br />index.html<br />modules<br />webdesign.html<br />IMG = IMaGe<br />SRC = SouRCe<br />Location of file.<br />../ means go up one level in structure<br />images<br />html.gif<br />
  23. 23. Inserting Images<br />my -website<br /><CENTER><br /><P><br /><IMG SRC=“../images/html.gif ” alt=“Basic HTML Code”><br /></P><br />index.html<br />modules<br />webdesign.html<br />alt = Alternative text<br />Used by visually impaired users, descirbes what the image is.<br />VERY IMPORTANT<br />images<br />html.gif<br />
  24. 24. Inserting object from other websites<br />http://tinyurl.com/2a68dgk<br />
  25. 25. Inserting object from other websites<br />In webdesign.html<br /><LI>Four Key Elements of web design</LI><br /> <UL><br /> <LI>Presentation</LI><br /> <LI>Structure</LI><br /> <LI>Writing Style</LI><br /> <LI>Referencing and Illustration</LI><br /> </UL><br /><INSERT YOUTUBE CODE HERE><br /></OL><br /><H3><br />
  26. 26. Key learning<br />HTML code always works in pairs<br />Code for Paragraphs <P>, Headings <H1> and List <OL> or <UL><br />Hyperlink <A HREF=“…”<br />Image <IMG SRC=“…”, <br />Images must have alternative text - alt=“…”<br />
  27. 27. Better looking website<br />http://www.le.ac.uk/oerresources/bdra/html/index.htm<br />

×