Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (19)
Destacado
Destacado (17)
Similar a Web design 2 - Basic HTML 2010
Similar a Web design 2 - Basic HTML 2010 (20)
Más de Matthew Mobbs
Más de Matthew Mobbs (16)
Último
Último (20)
Web design 2 - Basic HTML 2010
- 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>
- 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
- 21. Inserting Images my -website <CENTER> <P> </P> index.html modules 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
- 24. Inserting object from other websites http://tinyurl.com/2a68dgk
- 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=“…”
- 27. Better looking website http://www.le.ac.uk/oerresources/bdra/html/index.htm