SlideShare uma empresa Scribd logo
1 de 26
Creating a webpage – Basic HTML Matthew Mobbs e: mjm33@le.ac.uk web: http://www2.le.ac.uk/Members/mjm33 twitter: mjmobbs
HTML HyperTextMarkup Language The code used to write all websites Functions instruct web browsers what to show A little understanding will always help
Your first webpage Open Notepad <HTML> HTML always works in pairs!  Open and close! </HTML> This mean it is a WWW page
What is a page without a title! <HTML> 	<HEAD> 		<TITLE>	 Your name webpage 		</TITLE> 	</HEAD> </HTML>
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
Adding and Formatting the Page <BODY> <HTML> 	<HEAD> 		<TITLE>	 Your name webpage 		</TITLE> 	</HEAD> 	<BODY> The page content or body 	</BODY> </HTML>
Headings We use different heading styles to break-up page content Increased number  =  Smaller heading
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
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>
Paragraph Mark-up
“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>
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>
Lists <OL> or <UL> </BLOCKQUOTE> <UL> is a bullet or ‘unordered’ list Writing for the web ,[object Object]
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>
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>
Structuring a Website Home About Us Events Resources What the service is Writing Future Events Staff Essays Past Events Matt Mobbs Maths Handouts
Structuring a Website Home About Us Resources Images Events Writing What the service is Future Events Staff Past Events Essays Matt Mobbs Handouts Maths
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
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
Inserting Images my -website Open webdesign.html in Notepad index.html modules Try and understand the code webdesign.html images html.gif
Inserting Images my -website <CENTER> <P> </P> index.html modules webdesign.html images html.gif
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
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
Inserting object from other websites http://tinyurl.com/2a68dgk
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>
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=“…”

Mais conteúdo relacionado

Mais procurados

Introduction to web design
Introduction to web designIntroduction to web design
Introduction to web design
Fitra Sani
 
Essential Javascript -- A Javascript &lt;b>Tutorial&lt;/b>
Essential Javascript -- A Javascript &lt;b>Tutorial&lt;/b>Essential Javascript -- A Javascript &lt;b>Tutorial&lt;/b>
Essential Javascript -- A Javascript &lt;b>Tutorial&lt;/b>
tutorialsruby
 
Why Use Google Docs?
Why Use Google Docs?Why Use Google Docs?
Why Use Google Docs?
lindahb1950
 

Mais procurados (19)

Accessibility Usability Professional Summry
Accessibility Usability Professional SummryAccessibility Usability Professional Summry
Accessibility Usability Professional Summry
 
Introduction to web design
Introduction to web designIntroduction to web design
Introduction to web design
 
Lecture 6 Data Driven Design
Lecture 6  Data Driven DesignLecture 6  Data Driven Design
Lecture 6 Data Driven Design
 
Lecture 9 Professional Practices
Lecture 9 Professional PracticesLecture 9 Professional Practices
Lecture 9 Professional Practices
 
Essential Javascript -- A Javascript &lt;b>Tutorial&lt;/b>
Essential Javascript -- A Javascript &lt;b>Tutorial&lt;/b>Essential Javascript -- A Javascript &lt;b>Tutorial&lt;/b>
Essential Javascript -- A Javascript &lt;b>Tutorial&lt;/b>
 
HTML5 - techMaine Presentation 5/18/09
HTML5 - techMaine Presentation 5/18/09HTML5 - techMaine Presentation 5/18/09
HTML5 - techMaine Presentation 5/18/09
 
#1 of HTML and CSS3
#1 of HTML and CSS3 #1 of HTML and CSS3
#1 of HTML and CSS3
 
High performance websites session1
High performance websites  session1High performance websites  session1
High performance websites session1
 
How to include a JavaScript file from GDrive to Blogspot
How to include a JavaScript file from GDrive to BlogspotHow to include a JavaScript file from GDrive to Blogspot
How to include a JavaScript file from GDrive to Blogspot
 
#2 of HTML and CSS3
#2 of HTML and CSS3 #2 of HTML and CSS3
#2 of HTML and CSS3
 
Html5
Html5Html5
Html5
 
Word press plugin development
Word press plugin development Word press plugin development
Word press plugin development
 
Wordpress Questions & Answers
Wordpress Questions & AnswersWordpress Questions & Answers
Wordpress Questions & Answers
 
WordPress - From the Start - WordCamp Sofia 2013
WordPress - From the Start - WordCamp Sofia 2013WordPress - From the Start - WordCamp Sofia 2013
WordPress - From the Start - WordCamp Sofia 2013
 
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252-450
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252-450Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252-450
Deck 893ff61f-1fb8-4e15-a379-775dfdbcee77-12-173-252-450
 
Why Use Google Docs?
Why Use Google Docs?Why Use Google Docs?
Why Use Google Docs?
 
Shifting Gears
Shifting GearsShifting Gears
Shifting Gears
 
Accessible Websites With Lotus Notes/Domino, presented at the BLUG day event,...
Accessible Websites With Lotus Notes/Domino, presented at the BLUG day event,...Accessible Websites With Lotus Notes/Domino, presented at the BLUG day event,...
Accessible Websites With Lotus Notes/Domino, presented at the BLUG day event,...
 
Lesson 01
Lesson 01Lesson 01
Lesson 01
 

Destaque

ePortfolios, blogs and social media for business
ePortfolios, blogs and social media for businessePortfolios, blogs and social media for business
ePortfolios, blogs and social media for business
Matthew Mobbs
 
UKCISA PMI project presentation
UKCISA PMI project presentationUKCISA PMI project presentation
UKCISA PMI project presentation
Matthew Mobbs
 
Social Media For Beginners - Agcas 2012
Social Media For Beginners - Agcas 2012Social Media For Beginners - Agcas 2012
Social Media For Beginners - Agcas 2012
Matthew Mobbs
 
Using Social Media as a Careers Service and Advising Students
Using Social Media as a Careers Service and Advising StudentsUsing Social Media as a Careers Service and Advising Students
Using Social Media as a Careers Service and Advising Students
Matthew Mobbs
 
Creating a e portfolio using wordpress
Creating a e portfolio using wordpressCreating a e portfolio using wordpress
Creating a e portfolio using wordpress
Matthew Mobbs
 
Building an ePortfolio using Web 2.0 Technologies (2009)
Building an ePortfolio using Web 2.0 Technologies (2009)Building an ePortfolio using Web 2.0 Technologies (2009)
Building an ePortfolio using Web 2.0 Technologies (2009)
Matthew Mobbs
 
Social media for beginners
Social media for beginnersSocial media for beginners
Social media for beginners
Matthew Mobbs
 
Web services and accounts
Web services and accountsWeb services and accounts
Web services and accounts
Matthew Mobbs
 

Destaque (17)

ePortfolios, blogs and social media for business
ePortfolios, blogs and social media for businessePortfolios, blogs and social media for business
ePortfolios, blogs and social media for business
 
Web design part 1
Web design part 1Web design part 1
Web design part 1
 
UKCISA PMI project presentation
UKCISA PMI project presentationUKCISA PMI project presentation
UKCISA PMI project presentation
 
A brief introduction of how to use audacity
A brief introduction of how to use audacityA brief introduction of how to use audacity
A brief introduction of how to use audacity
 
Social Media For Beginners - Agcas 2012
Social Media For Beginners - Agcas 2012Social Media For Beginners - Agcas 2012
Social Media For Beginners - Agcas 2012
 
Using Social Media as a Careers Service and Advising Students
Using Social Media as a Careers Service and Advising StudentsUsing Social Media as a Careers Service and Advising Students
Using Social Media as a Careers Service and Advising Students
 
Creating a e portfolio using wordpress
Creating a e portfolio using wordpressCreating a e portfolio using wordpress
Creating a e portfolio using wordpress
 
PLEase help m study
PLEase help m studyPLEase help m study
PLEase help m study
 
ADSHE Conference - Access to Study Skills
ADSHE Conference - Access to Study SkillsADSHE Conference - Access to Study Skills
ADSHE Conference - Access to Study Skills
 
Using Social Media to assist your career - Audio Version
Using Social Media to assist your career - Audio VersionUsing Social Media to assist your career - Audio Version
Using Social Media to assist your career - Audio Version
 
Building an ePortfolio using Web 2.0 Technologies (2009)
Building an ePortfolio using Web 2.0 Technologies (2009)Building an ePortfolio using Web 2.0 Technologies (2009)
Building an ePortfolio using Web 2.0 Technologies (2009)
 
Personal branding - School of Management 2013
Personal branding - School of Management 2013Personal branding - School of Management 2013
Personal branding - School of Management 2013
 
Social media for beginners
Social media for beginnersSocial media for beginners
Social media for beginners
 
Web design1 2010/11
Web design1 2010/11Web design1 2010/11
Web design1 2010/11
 
Personalised Learning, Behind and Beyond Google
Personalised Learning, Behind and Beyond GooglePersonalised Learning, Behind and Beyond Google
Personalised Learning, Behind and Beyond Google
 
Chinese new year
Chinese new yearChinese new year
Chinese new year
 
Web services and accounts
Web services and accountsWeb services and accounts
Web services and accounts
 

Semelhante a Web design 2 - Basic HTML 2010 (20)

Creating a Webpage
Creating a WebpageCreating a Webpage
Creating a Webpage
 
How To Create Personal Web Pages On My Web
How To Create Personal Web Pages On My WebHow To Create Personal Web Pages On My Web
How To Create Personal Web Pages On My Web
 
Lecture 1 - Comm Lab: Web @ ITP
Lecture 1 - Comm Lab: Web @ ITPLecture 1 - Comm Lab: Web @ ITP
Lecture 1 - Comm Lab: Web @ ITP
 
Xhtml Part1
Xhtml Part1Xhtml Part1
Xhtml Part1
 
Module 2 Lesson 1
Module 2 Lesson 1Module 2 Lesson 1
Module 2 Lesson 1
 
Basic HTML
Basic HTMLBasic HTML
Basic HTML
 
Introducing YUI
Introducing YUIIntroducing YUI
Introducing YUI
 
Basic HTML
Basic HTMLBasic HTML
Basic HTML
 
HTML to FTP
HTML to FTPHTML to FTP
HTML to FTP
 
ARTDM 171 Week 4: Tags
ARTDM 171 Week 4: TagsARTDM 171 Week 4: Tags
ARTDM 171 Week 4: Tags
 
Html basics
Html basicsHtml basics
Html basics
 
HTML Fundamentals
HTML FundamentalsHTML Fundamentals
HTML Fundamentals
 
Dreamweaver
DreamweaverDreamweaver
Dreamweaver
 
Web designing using html
Web designing using htmlWeb designing using html
Web designing using html
 
Building A Website
Building A WebsiteBuilding A Website
Building A Website
 
YL Intro html
YL Intro htmlYL Intro html
YL Intro html
 
Web designp pt
Web designp ptWeb designp pt
Web designp pt
 
Intro to html
Intro to htmlIntro to html
Intro to html
 
Intro to html
Intro to htmlIntro to html
Intro to html
 
Xml Zoe
Xml ZoeXml Zoe
Xml Zoe
 

Mais de Matthew Mobbs

Blogging your experience lgip2012
Blogging your experience   lgip2012Blogging your experience   lgip2012
Blogging your experience lgip2012
Matthew Mobbs
 
Social media to assist your applications
Social media to assist your applicationsSocial media to assist your applications
Social media to assist your applications
Matthew Mobbs
 
Creating a e portfolio using wordpress
Creating a e portfolio using wordpressCreating a e portfolio using wordpress
Creating a e portfolio using wordpress
Matthew Mobbs
 
Using Social Media to develop a personal brand - SIFE 2011
Using Social Media to develop a personal brand - SIFE 2011Using Social Media to develop a personal brand - SIFE 2011
Using Social Media to develop a personal brand - SIFE 2011
Matthew Mobbs
 
Careers Service Publicity Sample
Careers Service Publicity SampleCareers Service Publicity Sample
Careers Service Publicity Sample
Matthew Mobbs
 
Circuit de catalunya i photo book
Circuit de catalunya i photo bookCircuit de catalunya i photo book
Circuit de catalunya i photo book
Matthew Mobbs
 
Personal learning environments and portals
Personal learning environments and portalsPersonal learning environments and portals
Personal learning environments and portals
Matthew Mobbs
 
Using social media to develop your personal branding
Using social media to develop your personal brandingUsing social media to develop your personal branding
Using social media to develop your personal branding
Matthew Mobbs
 
Using social media to assist your Career
Using social media to assist your CareerUsing social media to assist your Career
Using social media to assist your Career
Matthew Mobbs
 
Web design - Creating a Google Site
Web design - Creating a Google SiteWeb design - Creating a Google Site
Web design - Creating a Google Site
Matthew Mobbs
 

Mais de Matthew Mobbs (16)

MOOCs: The Leicester Landscape
MOOCs: The Leicester LandscapeMOOCs: The Leicester Landscape
MOOCs: The Leicester Landscape
 
Blogging your experience lgip2012
Blogging your experience   lgip2012Blogging your experience   lgip2012
Blogging your experience lgip2012
 
Example tweets
Example tweetsExample tweets
Example tweets
 
LinkedIn Lab
LinkedIn LabLinkedIn Lab
LinkedIn Lab
 
Making the most of Twitter
Making the most of TwitterMaking the most of Twitter
Making the most of Twitter
 
Social media to assist your applications
Social media to assist your applicationsSocial media to assist your applications
Social media to assist your applications
 
Social Media Taster - WISE Project
Social Media Taster - WISE ProjectSocial Media Taster - WISE Project
Social Media Taster - WISE Project
 
Creating a e portfolio using wordpress
Creating a e portfolio using wordpressCreating a e portfolio using wordpress
Creating a e portfolio using wordpress
 
Using Social Media to develop a personal brand - SIFE 2011
Using Social Media to develop a personal brand - SIFE 2011Using Social Media to develop a personal brand - SIFE 2011
Using Social Media to develop a personal brand - SIFE 2011
 
Careers Service Publicity Sample
Careers Service Publicity SampleCareers Service Publicity Sample
Careers Service Publicity Sample
 
Circuit de catalunya i photo book
Circuit de catalunya i photo bookCircuit de catalunya i photo book
Circuit de catalunya i photo book
 
Video Production
Video ProductionVideo Production
Video Production
 
Personal learning environments and portals
Personal learning environments and portalsPersonal learning environments and portals
Personal learning environments and portals
 
Using social media to develop your personal branding
Using social media to develop your personal brandingUsing social media to develop your personal branding
Using social media to develop your personal branding
 
Using social media to assist your Career
Using social media to assist your CareerUsing social media to assist your Career
Using social media to assist your Career
 
Web design - Creating a Google Site
Web design - Creating a Google SiteWeb design - Creating a Google Site
Web design - Creating a Google Site
 

Último

Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
ciinovamais
 
Seal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptxSeal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptx
negromaestrong
 

Último (20)

Introduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsIntroduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The Basics
 
Key note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfKey note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdf
 
SOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning PresentationSOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning Presentation
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
 
This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.
 
Seal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptxSeal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptx
 
Mixin Classes in Odoo 17 How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17  How to Extend Models Using Mixin ClassesMixin Classes in Odoo 17  How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17 How to Extend Models Using Mixin Classes
 
Understanding Accommodations and Modifications
Understanding  Accommodations and ModificationsUnderstanding  Accommodations and Modifications
Understanding Accommodations and Modifications
 
General Principles of Intellectual Property: Concepts of Intellectual Proper...
General Principles of Intellectual Property: Concepts of Intellectual  Proper...General Principles of Intellectual Property: Concepts of Intellectual  Proper...
General Principles of Intellectual Property: Concepts of Intellectual Proper...
 
How to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POSHow to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POS
 
ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.
 
Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)
 
Spatium Project Simulation student brief
Spatium Project Simulation student briefSpatium Project Simulation student brief
Spatium Project Simulation student brief
 
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
 
Magic bus Group work1and 2 (Team 3).pptx
Magic bus Group work1and 2 (Team 3).pptxMagic bus Group work1and 2 (Team 3).pptx
Magic bus Group work1and 2 (Team 3).pptx
 
Unit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxUnit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptx
 
Python Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docxPython Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docx
 
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdfUGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
 
Food safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdfFood safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdf
 
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
 

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>
  • 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
  • 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