1. Creating a webpage â Basic HTML Matthew Mobbs e: mjm33@le.ac.uk web: http://www2.le.ac.uk/Members/mjm33 twitter: mjmobbs
2. HTML HyperTextMarkup Language The code used to write all websites Functions instruct web browsers what to show A little understanding will always help
3. Your first webpage Open Notepad <HTML> HTML always works in pairs! Open and close! </HTML> This mean it is a WWW page
4. What is a page without a title! <HTML> <HEAD> <TITLE> Your name webpage </TITLE> </HEAD> </HTML>
5. Check your work⊠File Open the file. It will open in Internet Explorer. Is the name is the Title Bar the same as you typed? Save As Name the file âindex.htmlâ Save
6. Adding and Formatting the Page <BODY> <HTML> <HEAD> <TITLE> Your name webpage </TITLE> </HEAD> <BODY> The page content or body </BODY> </HTML>
7. Headings We use different heading styles to break-up page content Increased number = Smaller heading
8. Add a Heading to your page <H1> <BODY> Add Heading <CENTER> <H1> Your Name </H1> Centre Text </CENTER> Add a line <HR> </BODY> Save and Review your page
9. Writing a Paragraph <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> <BODY> <CENTER> <H1> Your Name </H1> </CENTER> <HR> <P> </P> </BODY>
11. âQuotingâ <BLOCKQUOTE> </P> In the quote say why you chose to study this course⊠âIâm studying MA HumanitiesâŠâ <BLOCKQUOTE> <P> âYour Quoteâ </BR> <I>Says Your Name</I> </P> </BLOCKQUOTE> </BODY>
12. Lists <OL> or <UL> </BLOCKQUOTE> <OL> is a numerical or âorderedâ list Module Module 1 Module 2 Writing for the web <H3>Modules</H3> <OL> <LI>Module 1</LI> <LI>Module 2</LI> <LI>Writing for the Web</LI> </OL> </BODY>
13.
14. HTML<H3>Module</H3> <OL> <LI>Module 1</LI> <LI>Module 2</LI> <LI>Writing for the Web</LI> <UL> <LI>Web Design</LI> <LI>HTML</LI> </UL> </OL> </BODY>
15. 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>
16. Structuring a Website Home About Us Events Resources What the service is Writing Future Events Staff Essays Past Events Matt Mobbs Maths Handouts
17. Structuring a Website Home About Us Resources Images Events Writing What the service is Future Events Staff Past Events Essays Matt Mobbs Handouts Maths
18. Download and structure your site my -website 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 index.html modules webdesign.html images html.gif
19. Insert hyperlink to file my -website </BLOCKQUOTE> <H3>Module</H3> <OL> <LI>Module 1</LI> <LI>Module 2</LI> <LI>Writing for the Web</LI> index.html modules <UL> <LI><AHREF=â modules/web- design.htmlâ title=âWeb Designâ> Web Design </A></LI> <LI>HTML</LI> </UL> webdesign.html images html.gif
20. Inserting Images my -website Open webdesign.html in Notepad index.html modules Try and understand the code webdesign.html images html.gif
22. Inserting Images my -website <CENTER> <P> <IMG SRC=â../images/html.gif â> </P> index.html modules webdesign.html IMG = IMaGe SRC = SouRCe Location of file. ../ means go up one level in structure images html.gif
23. Inserting Images my -website <CENTER> <P> <IMG SRC=â../images/html.gif â alt=âBasic HTML Codeâ> </P> index.html modules webdesign.html alt = Alternative text Used by visually impaired users, descirbes what the image is. VERY IMPORTANT images html.gif
25. Inserting object from other websites In webdesign.html <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>
26. 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=ââŠâ