Creating a Webpage

732 views

Published on

Published in: Education, Technology, Sports
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
732
On SlideShare
0
From Embeds
0
Number of Embeds
27
Actions
Shares
0
Downloads
26
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Creating a Webpage

  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. Your first webpage<br />Open Notepad<br />&lt;HTML&gt;<br />HTML always works in pairs! <br />Open and close!<br />&lt;/HTML&gt;<br />This mean it is a WWW page<br />
  3. 3. What is a page without a title!<br />&lt;HTML&gt;<br /> &lt;HEAD&gt;<br /> &lt;TITLE&gt; <br />Your name webpage<br /> &lt;/TITLE&gt;<br /> &lt;/HEAD&gt;<br />&lt;/HTML&gt;<br />
  4. 4. 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<br />Save as .html<br />
  5. 5. Adding and Formatting the Page &lt;BODY&gt;<br />&lt;HTML&gt;<br /> &lt;HEAD&gt;<br /> &lt;TITLE&gt; <br />Your name webpage<br /> &lt;/TITLE&gt;<br /> &lt;/HEAD&gt;<br /> &lt;BODY&gt;<br />The page content or body<br /> &lt;/BODY&gt;<br />&lt;/HTML&gt;<br />
  6. 6. Headings<br />We use different heading styles to break-up page content<br />Increased number<br /> = <br />Smaller heading<br />
  7. 7. Add a Heading to your page &lt;H1&gt;<br />&lt;BODY&gt;<br />Add Heading<br /> &lt;CENTER&gt;<br /> &lt;H1&gt;<br />Your Name<br /> &lt;/H1&gt;<br />Centre Text<br /> &lt;/CENTER&gt;<br />Add a line<br /> &lt;HR&gt;<br />&lt;/BODY&gt;<br />Save and Review your page<br />
  8. 8. Writing a Paragraph &lt;P&gt; <br />&lt;P&gt;<br />Your name is doing a &lt;STRONG&gt;MA Humanities&lt;/STRONG&gt; degree at the &lt;I&gt;University of Leicester&lt;/I&gt;. Your name first degree was &lt;B&gt;Your degree&lt;/B&gt; from &lt;I&gt;first degree institution&lt;/I&gt;<br />&lt;/P&gt;<br />&lt;BODY&gt;<br /> &lt;CENTER&gt;<br /> &lt;H1&gt;<br />Your Name<br /> &lt;/H1&gt;<br /> &lt;/CENTER&gt;<br /> &lt;HR&gt;<br /> &lt;P&gt;<br /> &lt;/P&gt;<br />&lt;/BODY&gt;<br />
  9. 9. Paragraph Mark-up<br />
  10. 10. “Quoting” &lt;BLOCKQUOTE&gt;<br />&lt;/P&gt;<br />In the quote say why you chose to study this course…<br />“I’m studying MA Humanities…” <br /> &lt;BLOCKQUOTE&gt;<br /> &lt;P&gt;<br />“Your Quote”<br /> &lt;/BR&gt;<br /> &lt;I&gt;Says Your Name&lt;/I&gt;<br /> &lt;/P&gt;<br /> &lt;/BLOCKQUOTE&gt;<br />&lt;/BODY&gt;<br />
  11. 11. Lists &lt;OL&gt; or &lt;UL&gt;<br />&lt;/BLOCKQUOTE&gt;<br />&lt;OL&gt; is a numerical or ‘ordered’ list<br />Module<br />Module 1<br />Module 2<br />Writing for the web<br />&lt;H3&gt;Modules&lt;/H3&gt;<br />&lt;OL&gt;<br /> &lt;LI&gt;Module 1&lt;/LI&gt;<br /> &lt;LI&gt;Module 2&lt;/LI&gt;<br /> &lt;LI&gt;Writing for the Web&lt;/LI&gt;<br />&lt;/OL&gt;<br />&lt;/BODY&gt;<br />
  12. 12. Lists &lt;OL&gt; or &lt;UL&gt;<br />&lt;/BLOCKQUOTE&gt;<br />&lt;UL&gt; is a bullet or ‘unordered’ list<br />Writing for the web<br /><ul><li>Web Design
  13. 13. HTML</li></ul>&lt;H3&gt;Module&lt;/H3&gt;<br />&lt;OL&gt;<br /> &lt;LI&gt;Module 1&lt;/LI&gt;<br /> &lt;LI&gt;Module 2&lt;/LI&gt;<br /> &lt;LI&gt;Writing for the Web&lt;/LI&gt;<br /> &lt;UL&gt;<br /> &lt;LI&gt;Web Design&lt;/LI&gt;<br /> &lt;LI&gt;HTML&lt;/LI&gt;<br /> &lt;/UL&gt;<br />&lt;/OL&gt;<br />&lt;/BODY&gt;<br />
  14. 14. Hyperlinks &lt;A HREF=<br />&lt;P&gt;<br />Your name is doing a &lt;STRONG&gt;MA Humanities&lt;/STRONG&gt; degree at the<br />&lt;A HREF=“http://www.le.ac.uk”&gt;<br />&lt;I&gt;University of Leicester&lt;/I&gt;<br />&lt;/A&gt;<br />. Your name first degree was &lt;B&gt;Your degree&lt;/B&gt; from &lt;I&gt;first degree institution&lt;/I&gt;<br />&lt;/P&gt;<br />
  15. 15. 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 />
  16. 16. Structuring a Website<br />Home<br />About Us<br />Resources<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 />
  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 ‘htmlcode.png’ and put in a folder called images<br />index.html<br />modules<br />webdesign.html<br />images<br />htmlcode.gif<br />
  19. 19. Dreamweaver<br />A more sophisticated web editing package<br />To Install:<br />Start<br />All Programs<br />CFS Software 2<br />Select & Remove Software<br />Select Dreamweaver 8.0.2 from the list<br />Add and Done<br />
  20. 20. Getting started with Dreamweaver<br />From the Files list select ‘Manage Sites’<br />
  21. 21. Getting started with Dreamweaver<br />When the pop-up box appears select New…<br />
  22. 22. Getting started with Dreamweaver<br />Go to the Advanced options<br />Name your site ‘My Website’<br />Locate the folder you created containing your website<br />Locate the image folder<br />Select OK<br />
  23. 23. Features of Dreamweaver<br />Select ‘Split’<br />Open index.html<br />
  24. 24. Features of Dreamweaver<br />Top: <br />HTML code<br />Text can be formatted using toolbar. E.g. colour and size <br />Top: <br />How it will appear online<br />
  25. 25. Insert Hyperlink to Subpages<br />Open index.html<br />Highlight the words ‘Writing for the Web’ in the Module list<br />Select the ‘browse’ icon in the ‘Link’ creator in the Properties toolbar. <br />Browse to webdesign.html in the modules folder of your website and select<br />
  26. 26. Hyperlink HTML<br />&lt;LI&gt;&lt;a href=“module/webdesign.html”&gt;Writing for the Web&lt;/a&gt;&lt;/LI&gt;<br />You can see the website structure in the link…folder/page<br />Complete the link…add title<br />&lt;LI&gt;&lt;a href=“module/webdesign.html” <br />title=”Writing for the Web&quot;&gt;Writing for the Web&lt;/a&gt;&lt;/LI&gt;<br />This instructs user what the link will open, used by users with visual impairments<br />
  27. 27. Insert Image<br />Open webdesign.html<br />Place the cursor at the bottom of the page.<br />Select: Insert -&gt; Image<br />Browse to the htmlcode.png image you downloaded and select.<br />When this box appears complete the Alternate text with ‘Basic HTML’. <br />ALT describes what the images is, used by screen readers to assist visually impaired users<br />&lt;imgsrc=&quot;../image/html.png&quot; alt=&quot;Basic HTML”&gt;<br />
  28. 28. Complete the image<br />Add a Boarder<br />&lt;CENTER&gt;<br />&lt;P&gt; <br />&lt;imgsrc=&quot;../image/html.png&quot; alt=&quot;Basic HTML&quot; BORDER=&quot;2px&quot;&gt; <br />&lt;/P&gt;<br />&lt;/CENTER&gt; <br />Name the image<br />“2px” how many pixels wide the boarder is.<br />&lt;CENTER&gt;<br />&lt;P&gt; <br />&lt;imgsrc=&quot;../image/html.png&quot; alt=&quot;Basic HTML&quot; BORDER=&quot;2px&quot;&gt; <br />&lt;/P&gt;<br />&lt;H4&gt;Basic HTML&lt;/H4&gt;<br />&lt;/CENTER&gt; <br />
  29. 29. Hyperlink back to homepage<br />On the webdesign.html page, in the HTML code, below the image add:<br />&lt;/H4&gt;<br />&lt;P&gt; <br />RETURN HOME <br />&lt;/P&gt; <br />&lt;/CENTER&gt; <br />Highlight the word RETURN HOME. Add the link to index.html<br />In the HTML add your ‘title’ <br />
  30. 30. Note the link<br />&lt;a href=&quot;../index.html&quot; title=&quot;MA Humanities Home&quot;&gt;RETURN HOME&lt;/a&gt;<br />../ means ‘go up a level’ in the folder structure <br />
  31. 31. Larger structures<br />Home<br />About Us<br />Resources<br />Images<br />Events<br />Writing<br />Link from ‘Matt Mobbs’ to ‘Home’<br />../../HOME<br />Need to go up two level = 2 x ../<br />What the service is<br />Future Events<br />Staff<br />Past Events<br />Essays<br />Matt Mobbs<br />Handouts<br />Maths<br />
  32. 32. Larger structures<br />Home<br />About Us<br />Resources<br />Images<br />Events<br />Writing<br />Link from ‘Matt Mobbs’ to ‘Home’<br />../../HOME<br />Need to go up two level = 2 x ../<br />What the service is<br />Future Events<br />Same applies to images<br />&lt;imgsrc=&quot;../../image/matt.jpg”&gt;<br />Up two, down one<br />Staff<br />Past Events<br />Essays<br />Matt Mobbs<br />Handouts<br />Maths<br />
  33. 33. Better looking website<br />http://www.oswd.org/<br />

×