An introduction to HTML - University of Sheffield
Transcript of An introduction to HTML - University of Sheffield
![Page 1: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/1.jpg)
An introduction to HTML
Recall that LATEX is referred to as a mark-up language
LATEXcommands annotate text to make it display in specified ways
HTML is another mark-up language
Recall that LATEX is referred to as a mark-up language LATEXcommands annotate text to make it display in specified ways
HTML is another mark-up language
Recall that LATEX is referred to as a mark-up language LATEXcommands annotate text to make it display in specified ways
HTML is another mark-up language
What is HTML
HTML stands for lsquoHyperText Markup Languagersquo
It is usedmainly for creating webpages It allows easy formatting ofparagraphs and headings and also commands specificallydesigned for webpages (hyperlinks etc)
As with LATEX HTML files are really just annotated text files
HTML stands for lsquoHyperText Markup Languagersquo It is usedmainly for creating webpages
It allows easy formatting ofparagraphs and headings and also commands specificallydesigned for webpages (hyperlinks etc)
As with LATEX HTML files are really just annotated text files
HTML stands for lsquoHyperText Markup Languagersquo It is usedmainly for creating webpages It allows easy formatting ofparagraphs and headings
and also commands specificallydesigned for webpages (hyperlinks etc)
As with LATEX HTML files are really just annotated text files
HTML stands for lsquoHyperText Markup Languagersquo It is usedmainly for creating webpages It allows easy formatting ofparagraphs and headings and also commands specificallydesigned for webpages (hyperlinks etc)
As with LATEX HTML files are really just annotated text files
HTML stands for lsquoHyperText Markup Languagersquo It is usedmainly for creating webpages It allows easy formatting ofparagraphs and headings and also commands specificallydesigned for webpages (hyperlinks etc)
As with LATEX HTML files are really just annotated text files
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair (ltpgt and ltpgt forexample)
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair (ltpgt and ltpgt forexample)
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml
you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair (ltpgt and ltpgt forexample)
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair (ltpgt and ltpgt forexample)
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair
(ltpgt and ltpgt forexample)
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair (ltpgt and ltpgt forexample)
The material to be displayed is put between the ltbodygt andltbodygt tags
(This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
Folders and filepaths
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages
You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say
Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder
move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file
then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Here imageslogojpg is called the URL (uniform resourcelocator) of the image
More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image
as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Hyperlinks
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages
allowing users toclick on words or images to get to new pages
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages allowing users toclick on words or images to get to new pages
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link
Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
Linking to external webpages such as the BBC website is alsoeasy
Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Filenames
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers)
and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML code
Mixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying
Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo
Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo
youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensions
You can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
Activity (Spot the difference with a difference) Thecirculated HTML code almost corresponds to the code for thewebpage linked from the course website (see PresentationMaterials Week 8) Try to spot as many places as possiblethat the code is different from whatrsquos on screen
Viewing the page source
It is possible to look at the source code for any HTMLwebpage you visit
Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software
On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 2: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/2.jpg)
Recall that LATEX is referred to as a mark-up language
LATEXcommands annotate text to make it display in specified ways
HTML is another mark-up language
Recall that LATEX is referred to as a mark-up language LATEXcommands annotate text to make it display in specified ways
HTML is another mark-up language
Recall that LATEX is referred to as a mark-up language LATEXcommands annotate text to make it display in specified ways
HTML is another mark-up language
What is HTML
HTML stands for lsquoHyperText Markup Languagersquo
It is usedmainly for creating webpages It allows easy formatting ofparagraphs and headings and also commands specificallydesigned for webpages (hyperlinks etc)
As with LATEX HTML files are really just annotated text files
HTML stands for lsquoHyperText Markup Languagersquo It is usedmainly for creating webpages
It allows easy formatting ofparagraphs and headings and also commands specificallydesigned for webpages (hyperlinks etc)
As with LATEX HTML files are really just annotated text files
HTML stands for lsquoHyperText Markup Languagersquo It is usedmainly for creating webpages It allows easy formatting ofparagraphs and headings
and also commands specificallydesigned for webpages (hyperlinks etc)
As with LATEX HTML files are really just annotated text files
HTML stands for lsquoHyperText Markup Languagersquo It is usedmainly for creating webpages It allows easy formatting ofparagraphs and headings and also commands specificallydesigned for webpages (hyperlinks etc)
As with LATEX HTML files are really just annotated text files
HTML stands for lsquoHyperText Markup Languagersquo It is usedmainly for creating webpages It allows easy formatting ofparagraphs and headings and also commands specificallydesigned for webpages (hyperlinks etc)
As with LATEX HTML files are really just annotated text files
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair (ltpgt and ltpgt forexample)
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair (ltpgt and ltpgt forexample)
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml
you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair (ltpgt and ltpgt forexample)
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair (ltpgt and ltpgt forexample)
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair
(ltpgt and ltpgt forexample)
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair (ltpgt and ltpgt forexample)
The material to be displayed is put between the ltbodygt andltbodygt tags
(This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
Folders and filepaths
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages
You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say
Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder
move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file
then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Here imageslogojpg is called the URL (uniform resourcelocator) of the image
More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image
as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Hyperlinks
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages
allowing users toclick on words or images to get to new pages
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages allowing users toclick on words or images to get to new pages
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link
Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
Linking to external webpages such as the BBC website is alsoeasy
Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Filenames
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers)
and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML code
Mixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying
Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo
Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo
youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensions
You can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
Activity (Spot the difference with a difference) Thecirculated HTML code almost corresponds to the code for thewebpage linked from the course website (see PresentationMaterials Week 8) Try to spot as many places as possiblethat the code is different from whatrsquos on screen
Viewing the page source
It is possible to look at the source code for any HTMLwebpage you visit
Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software
On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 3: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/3.jpg)
Recall that LATEX is referred to as a mark-up language LATEXcommands annotate text to make it display in specified ways
HTML is another mark-up language
Recall that LATEX is referred to as a mark-up language LATEXcommands annotate text to make it display in specified ways
HTML is another mark-up language
What is HTML
HTML stands for lsquoHyperText Markup Languagersquo
It is usedmainly for creating webpages It allows easy formatting ofparagraphs and headings and also commands specificallydesigned for webpages (hyperlinks etc)
As with LATEX HTML files are really just annotated text files
HTML stands for lsquoHyperText Markup Languagersquo It is usedmainly for creating webpages
It allows easy formatting ofparagraphs and headings and also commands specificallydesigned for webpages (hyperlinks etc)
As with LATEX HTML files are really just annotated text files
HTML stands for lsquoHyperText Markup Languagersquo It is usedmainly for creating webpages It allows easy formatting ofparagraphs and headings
and also commands specificallydesigned for webpages (hyperlinks etc)
As with LATEX HTML files are really just annotated text files
HTML stands for lsquoHyperText Markup Languagersquo It is usedmainly for creating webpages It allows easy formatting ofparagraphs and headings and also commands specificallydesigned for webpages (hyperlinks etc)
As with LATEX HTML files are really just annotated text files
HTML stands for lsquoHyperText Markup Languagersquo It is usedmainly for creating webpages It allows easy formatting ofparagraphs and headings and also commands specificallydesigned for webpages (hyperlinks etc)
As with LATEX HTML files are really just annotated text files
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair (ltpgt and ltpgt forexample)
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair (ltpgt and ltpgt forexample)
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml
you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair (ltpgt and ltpgt forexample)
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair (ltpgt and ltpgt forexample)
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair
(ltpgt and ltpgt forexample)
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair (ltpgt and ltpgt forexample)
The material to be displayed is put between the ltbodygt andltbodygt tags
(This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
Folders and filepaths
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages
You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say
Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder
move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file
then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Here imageslogojpg is called the URL (uniform resourcelocator) of the image
More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image
as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Hyperlinks
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages
allowing users toclick on words or images to get to new pages
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages allowing users toclick on words or images to get to new pages
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link
Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
Linking to external webpages such as the BBC website is alsoeasy
Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Filenames
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers)
and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML code
Mixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying
Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo
Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo
youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensions
You can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
Activity (Spot the difference with a difference) Thecirculated HTML code almost corresponds to the code for thewebpage linked from the course website (see PresentationMaterials Week 8) Try to spot as many places as possiblethat the code is different from whatrsquos on screen
Viewing the page source
It is possible to look at the source code for any HTMLwebpage you visit
Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software
On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 4: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/4.jpg)
Recall that LATEX is referred to as a mark-up language LATEXcommands annotate text to make it display in specified ways
HTML is another mark-up language
What is HTML
HTML stands for lsquoHyperText Markup Languagersquo
It is usedmainly for creating webpages It allows easy formatting ofparagraphs and headings and also commands specificallydesigned for webpages (hyperlinks etc)
As with LATEX HTML files are really just annotated text files
HTML stands for lsquoHyperText Markup Languagersquo It is usedmainly for creating webpages
It allows easy formatting ofparagraphs and headings and also commands specificallydesigned for webpages (hyperlinks etc)
As with LATEX HTML files are really just annotated text files
HTML stands for lsquoHyperText Markup Languagersquo It is usedmainly for creating webpages It allows easy formatting ofparagraphs and headings
and also commands specificallydesigned for webpages (hyperlinks etc)
As with LATEX HTML files are really just annotated text files
HTML stands for lsquoHyperText Markup Languagersquo It is usedmainly for creating webpages It allows easy formatting ofparagraphs and headings and also commands specificallydesigned for webpages (hyperlinks etc)
As with LATEX HTML files are really just annotated text files
HTML stands for lsquoHyperText Markup Languagersquo It is usedmainly for creating webpages It allows easy formatting ofparagraphs and headings and also commands specificallydesigned for webpages (hyperlinks etc)
As with LATEX HTML files are really just annotated text files
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair (ltpgt and ltpgt forexample)
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair (ltpgt and ltpgt forexample)
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml
you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair (ltpgt and ltpgt forexample)
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair (ltpgt and ltpgt forexample)
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair
(ltpgt and ltpgt forexample)
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair (ltpgt and ltpgt forexample)
The material to be displayed is put between the ltbodygt andltbodygt tags
(This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
Folders and filepaths
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages
You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say
Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder
move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file
then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Here imageslogojpg is called the URL (uniform resourcelocator) of the image
More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image
as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Hyperlinks
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages
allowing users toclick on words or images to get to new pages
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages allowing users toclick on words or images to get to new pages
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link
Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
Linking to external webpages such as the BBC website is alsoeasy
Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Filenames
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers)
and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML code
Mixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying
Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo
Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo
youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensions
You can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
Activity (Spot the difference with a difference) Thecirculated HTML code almost corresponds to the code for thewebpage linked from the course website (see PresentationMaterials Week 8) Try to spot as many places as possiblethat the code is different from whatrsquos on screen
Viewing the page source
It is possible to look at the source code for any HTMLwebpage you visit
Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software
On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 5: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/5.jpg)
What is HTML
HTML stands for lsquoHyperText Markup Languagersquo
It is usedmainly for creating webpages It allows easy formatting ofparagraphs and headings and also commands specificallydesigned for webpages (hyperlinks etc)
As with LATEX HTML files are really just annotated text files
HTML stands for lsquoHyperText Markup Languagersquo It is usedmainly for creating webpages
It allows easy formatting ofparagraphs and headings and also commands specificallydesigned for webpages (hyperlinks etc)
As with LATEX HTML files are really just annotated text files
HTML stands for lsquoHyperText Markup Languagersquo It is usedmainly for creating webpages It allows easy formatting ofparagraphs and headings
and also commands specificallydesigned for webpages (hyperlinks etc)
As with LATEX HTML files are really just annotated text files
HTML stands for lsquoHyperText Markup Languagersquo It is usedmainly for creating webpages It allows easy formatting ofparagraphs and headings and also commands specificallydesigned for webpages (hyperlinks etc)
As with LATEX HTML files are really just annotated text files
HTML stands for lsquoHyperText Markup Languagersquo It is usedmainly for creating webpages It allows easy formatting ofparagraphs and headings and also commands specificallydesigned for webpages (hyperlinks etc)
As with LATEX HTML files are really just annotated text files
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair (ltpgt and ltpgt forexample)
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair (ltpgt and ltpgt forexample)
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml
you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair (ltpgt and ltpgt forexample)
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair (ltpgt and ltpgt forexample)
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair
(ltpgt and ltpgt forexample)
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair (ltpgt and ltpgt forexample)
The material to be displayed is put between the ltbodygt andltbodygt tags
(This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
Folders and filepaths
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages
You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say
Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder
move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file
then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Here imageslogojpg is called the URL (uniform resourcelocator) of the image
More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image
as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Hyperlinks
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages
allowing users toclick on words or images to get to new pages
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages allowing users toclick on words or images to get to new pages
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link
Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
Linking to external webpages such as the BBC website is alsoeasy
Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Filenames
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers)
and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML code
Mixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying
Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo
Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo
youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensions
You can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
Activity (Spot the difference with a difference) Thecirculated HTML code almost corresponds to the code for thewebpage linked from the course website (see PresentationMaterials Week 8) Try to spot as many places as possiblethat the code is different from whatrsquos on screen
Viewing the page source
It is possible to look at the source code for any HTMLwebpage you visit
Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software
On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 6: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/6.jpg)
HTML stands for lsquoHyperText Markup Languagersquo
It is usedmainly for creating webpages It allows easy formatting ofparagraphs and headings and also commands specificallydesigned for webpages (hyperlinks etc)
As with LATEX HTML files are really just annotated text files
HTML stands for lsquoHyperText Markup Languagersquo It is usedmainly for creating webpages
It allows easy formatting ofparagraphs and headings and also commands specificallydesigned for webpages (hyperlinks etc)
As with LATEX HTML files are really just annotated text files
HTML stands for lsquoHyperText Markup Languagersquo It is usedmainly for creating webpages It allows easy formatting ofparagraphs and headings
and also commands specificallydesigned for webpages (hyperlinks etc)
As with LATEX HTML files are really just annotated text files
HTML stands for lsquoHyperText Markup Languagersquo It is usedmainly for creating webpages It allows easy formatting ofparagraphs and headings and also commands specificallydesigned for webpages (hyperlinks etc)
As with LATEX HTML files are really just annotated text files
HTML stands for lsquoHyperText Markup Languagersquo It is usedmainly for creating webpages It allows easy formatting ofparagraphs and headings and also commands specificallydesigned for webpages (hyperlinks etc)
As with LATEX HTML files are really just annotated text files
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair (ltpgt and ltpgt forexample)
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair (ltpgt and ltpgt forexample)
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml
you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair (ltpgt and ltpgt forexample)
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair (ltpgt and ltpgt forexample)
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair
(ltpgt and ltpgt forexample)
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair (ltpgt and ltpgt forexample)
The material to be displayed is put between the ltbodygt andltbodygt tags
(This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
Folders and filepaths
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages
You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say
Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder
move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file
then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Here imageslogojpg is called the URL (uniform resourcelocator) of the image
More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image
as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Hyperlinks
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages
allowing users toclick on words or images to get to new pages
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages allowing users toclick on words or images to get to new pages
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link
Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
Linking to external webpages such as the BBC website is alsoeasy
Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Filenames
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers)
and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML code
Mixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying
Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo
Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo
youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensions
You can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
Activity (Spot the difference with a difference) Thecirculated HTML code almost corresponds to the code for thewebpage linked from the course website (see PresentationMaterials Week 8) Try to spot as many places as possiblethat the code is different from whatrsquos on screen
Viewing the page source
It is possible to look at the source code for any HTMLwebpage you visit
Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software
On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 7: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/7.jpg)
HTML stands for lsquoHyperText Markup Languagersquo It is usedmainly for creating webpages
It allows easy formatting ofparagraphs and headings and also commands specificallydesigned for webpages (hyperlinks etc)
As with LATEX HTML files are really just annotated text files
HTML stands for lsquoHyperText Markup Languagersquo It is usedmainly for creating webpages It allows easy formatting ofparagraphs and headings
and also commands specificallydesigned for webpages (hyperlinks etc)
As with LATEX HTML files are really just annotated text files
HTML stands for lsquoHyperText Markup Languagersquo It is usedmainly for creating webpages It allows easy formatting ofparagraphs and headings and also commands specificallydesigned for webpages (hyperlinks etc)
As with LATEX HTML files are really just annotated text files
HTML stands for lsquoHyperText Markup Languagersquo It is usedmainly for creating webpages It allows easy formatting ofparagraphs and headings and also commands specificallydesigned for webpages (hyperlinks etc)
As with LATEX HTML files are really just annotated text files
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair (ltpgt and ltpgt forexample)
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair (ltpgt and ltpgt forexample)
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml
you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair (ltpgt and ltpgt forexample)
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair (ltpgt and ltpgt forexample)
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair
(ltpgt and ltpgt forexample)
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair (ltpgt and ltpgt forexample)
The material to be displayed is put between the ltbodygt andltbodygt tags
(This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
Folders and filepaths
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages
You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say
Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder
move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file
then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Here imageslogojpg is called the URL (uniform resourcelocator) of the image
More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image
as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Hyperlinks
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages
allowing users toclick on words or images to get to new pages
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages allowing users toclick on words or images to get to new pages
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link
Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
Linking to external webpages such as the BBC website is alsoeasy
Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Filenames
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers)
and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML code
Mixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying
Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo
Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo
youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensions
You can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
Activity (Spot the difference with a difference) Thecirculated HTML code almost corresponds to the code for thewebpage linked from the course website (see PresentationMaterials Week 8) Try to spot as many places as possiblethat the code is different from whatrsquos on screen
Viewing the page source
It is possible to look at the source code for any HTMLwebpage you visit
Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software
On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 8: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/8.jpg)
HTML stands for lsquoHyperText Markup Languagersquo It is usedmainly for creating webpages It allows easy formatting ofparagraphs and headings
and also commands specificallydesigned for webpages (hyperlinks etc)
As with LATEX HTML files are really just annotated text files
HTML stands for lsquoHyperText Markup Languagersquo It is usedmainly for creating webpages It allows easy formatting ofparagraphs and headings and also commands specificallydesigned for webpages (hyperlinks etc)
As with LATEX HTML files are really just annotated text files
HTML stands for lsquoHyperText Markup Languagersquo It is usedmainly for creating webpages It allows easy formatting ofparagraphs and headings and also commands specificallydesigned for webpages (hyperlinks etc)
As with LATEX HTML files are really just annotated text files
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair (ltpgt and ltpgt forexample)
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair (ltpgt and ltpgt forexample)
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml
you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair (ltpgt and ltpgt forexample)
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair (ltpgt and ltpgt forexample)
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair
(ltpgt and ltpgt forexample)
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair (ltpgt and ltpgt forexample)
The material to be displayed is put between the ltbodygt andltbodygt tags
(This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
Folders and filepaths
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages
You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say
Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder
move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file
then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Here imageslogojpg is called the URL (uniform resourcelocator) of the image
More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image
as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Hyperlinks
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages
allowing users toclick on words or images to get to new pages
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages allowing users toclick on words or images to get to new pages
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link
Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
Linking to external webpages such as the BBC website is alsoeasy
Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Filenames
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers)
and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML code
Mixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying
Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo
Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo
youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensions
You can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
Activity (Spot the difference with a difference) Thecirculated HTML code almost corresponds to the code for thewebpage linked from the course website (see PresentationMaterials Week 8) Try to spot as many places as possiblethat the code is different from whatrsquos on screen
Viewing the page source
It is possible to look at the source code for any HTMLwebpage you visit
Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software
On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 9: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/9.jpg)
HTML stands for lsquoHyperText Markup Languagersquo It is usedmainly for creating webpages It allows easy formatting ofparagraphs and headings and also commands specificallydesigned for webpages (hyperlinks etc)
As with LATEX HTML files are really just annotated text files
HTML stands for lsquoHyperText Markup Languagersquo It is usedmainly for creating webpages It allows easy formatting ofparagraphs and headings and also commands specificallydesigned for webpages (hyperlinks etc)
As with LATEX HTML files are really just annotated text files
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair (ltpgt and ltpgt forexample)
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair (ltpgt and ltpgt forexample)
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml
you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair (ltpgt and ltpgt forexample)
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair (ltpgt and ltpgt forexample)
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair
(ltpgt and ltpgt forexample)
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair (ltpgt and ltpgt forexample)
The material to be displayed is put between the ltbodygt andltbodygt tags
(This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
Folders and filepaths
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages
You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say
Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder
move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file
then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Here imageslogojpg is called the URL (uniform resourcelocator) of the image
More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image
as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Hyperlinks
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages
allowing users toclick on words or images to get to new pages
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages allowing users toclick on words or images to get to new pages
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link
Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
Linking to external webpages such as the BBC website is alsoeasy
Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Filenames
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers)
and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML code
Mixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying
Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo
Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo
youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensions
You can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
Activity (Spot the difference with a difference) Thecirculated HTML code almost corresponds to the code for thewebpage linked from the course website (see PresentationMaterials Week 8) Try to spot as many places as possiblethat the code is different from whatrsquos on screen
Viewing the page source
It is possible to look at the source code for any HTMLwebpage you visit
Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software
On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 10: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/10.jpg)
HTML stands for lsquoHyperText Markup Languagersquo It is usedmainly for creating webpages It allows easy formatting ofparagraphs and headings and also commands specificallydesigned for webpages (hyperlinks etc)
As with LATEX HTML files are really just annotated text files
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair (ltpgt and ltpgt forexample)
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair (ltpgt and ltpgt forexample)
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml
you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair (ltpgt and ltpgt forexample)
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair (ltpgt and ltpgt forexample)
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair
(ltpgt and ltpgt forexample)
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair (ltpgt and ltpgt forexample)
The material to be displayed is put between the ltbodygt andltbodygt tags
(This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
Folders and filepaths
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages
You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say
Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder
move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file
then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Here imageslogojpg is called the URL (uniform resourcelocator) of the image
More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image
as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Hyperlinks
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages
allowing users toclick on words or images to get to new pages
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages allowing users toclick on words or images to get to new pages
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link
Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
Linking to external webpages such as the BBC website is alsoeasy
Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Filenames
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers)
and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML code
Mixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying
Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo
Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo
youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensions
You can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
Activity (Spot the difference with a difference) Thecirculated HTML code almost corresponds to the code for thewebpage linked from the course website (see PresentationMaterials Week 8) Try to spot as many places as possiblethat the code is different from whatrsquos on screen
Viewing the page source
It is possible to look at the source code for any HTMLwebpage you visit
Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software
On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 11: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/11.jpg)
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair (ltpgt and ltpgt forexample)
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair (ltpgt and ltpgt forexample)
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml
you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair (ltpgt and ltpgt forexample)
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair (ltpgt and ltpgt forexample)
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair
(ltpgt and ltpgt forexample)
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair (ltpgt and ltpgt forexample)
The material to be displayed is put between the ltbodygt andltbodygt tags
(This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
Folders and filepaths
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages
You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say
Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder
move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file
then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Here imageslogojpg is called the URL (uniform resourcelocator) of the image
More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image
as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Hyperlinks
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages
allowing users toclick on words or images to get to new pages
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages allowing users toclick on words or images to get to new pages
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link
Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
Linking to external webpages such as the BBC website is alsoeasy
Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Filenames
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers)
and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML code
Mixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying
Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo
Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo
youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensions
You can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
Activity (Spot the difference with a difference) Thecirculated HTML code almost corresponds to the code for thewebpage linked from the course website (see PresentationMaterials Week 8) Try to spot as many places as possiblethat the code is different from whatrsquos on screen
Viewing the page source
It is possible to look at the source code for any HTMLwebpage you visit
Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software
On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 12: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/12.jpg)
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair (ltpgt and ltpgt forexample)
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml
you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair (ltpgt and ltpgt forexample)
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair (ltpgt and ltpgt forexample)
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair
(ltpgt and ltpgt forexample)
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair (ltpgt and ltpgt forexample)
The material to be displayed is put between the ltbodygt andltbodygt tags
(This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
Folders and filepaths
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages
You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say
Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder
move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file
then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Here imageslogojpg is called the URL (uniform resourcelocator) of the image
More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image
as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Hyperlinks
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages
allowing users toclick on words or images to get to new pages
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages allowing users toclick on words or images to get to new pages
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link
Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
Linking to external webpages such as the BBC website is alsoeasy
Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Filenames
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers)
and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML code
Mixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying
Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo
Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo
youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensions
You can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
Activity (Spot the difference with a difference) Thecirculated HTML code almost corresponds to the code for thewebpage linked from the course website (see PresentationMaterials Week 8) Try to spot as many places as possiblethat the code is different from whatrsquos on screen
Viewing the page source
It is possible to look at the source code for any HTMLwebpage you visit
Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software
On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 13: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/13.jpg)
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml
you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair (ltpgt and ltpgt forexample)
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair (ltpgt and ltpgt forexample)
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair
(ltpgt and ltpgt forexample)
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair (ltpgt and ltpgt forexample)
The material to be displayed is put between the ltbodygt andltbodygt tags
(This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
Folders and filepaths
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages
You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say
Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder
move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file
then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Here imageslogojpg is called the URL (uniform resourcelocator) of the image
More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image
as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Hyperlinks
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages
allowing users toclick on words or images to get to new pages
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages allowing users toclick on words or images to get to new pages
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link
Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
Linking to external webpages such as the BBC website is alsoeasy
Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Filenames
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers)
and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML code
Mixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying
Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo
Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo
youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensions
You can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
Activity (Spot the difference with a difference) Thecirculated HTML code almost corresponds to the code for thewebpage linked from the course website (see PresentationMaterials Week 8) Try to spot as many places as possiblethat the code is different from whatrsquos on screen
Viewing the page source
It is possible to look at the source code for any HTMLwebpage you visit
Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software
On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 14: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/14.jpg)
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair (ltpgt and ltpgt forexample)
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair
(ltpgt and ltpgt forexample)
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair (ltpgt and ltpgt forexample)
The material to be displayed is put between the ltbodygt andltbodygt tags
(This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
Folders and filepaths
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages
You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say
Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder
move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file
then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Here imageslogojpg is called the URL (uniform resourcelocator) of the image
More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image
as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Hyperlinks
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages
allowing users toclick on words or images to get to new pages
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages allowing users toclick on words or images to get to new pages
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link
Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
Linking to external webpages such as the BBC website is alsoeasy
Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Filenames
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers)
and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML code
Mixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying
Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo
Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo
youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensions
You can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
Activity (Spot the difference with a difference) Thecirculated HTML code almost corresponds to the code for thewebpage linked from the course website (see PresentationMaterials Week 8) Try to spot as many places as possiblethat the code is different from whatrsquos on screen
Viewing the page source
It is possible to look at the source code for any HTMLwebpage you visit
Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software
On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 15: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/15.jpg)
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair
(ltpgt and ltpgt forexample)
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair (ltpgt and ltpgt forexample)
The material to be displayed is put between the ltbodygt andltbodygt tags
(This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
Folders and filepaths
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages
You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say
Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder
move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file
then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Here imageslogojpg is called the URL (uniform resourcelocator) of the image
More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image
as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Hyperlinks
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages
allowing users toclick on words or images to get to new pages
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages allowing users toclick on words or images to get to new pages
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link
Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
Linking to external webpages such as the BBC website is alsoeasy
Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Filenames
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers)
and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML code
Mixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying
Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo
Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo
youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensions
You can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
Activity (Spot the difference with a difference) Thecirculated HTML code almost corresponds to the code for thewebpage linked from the course website (see PresentationMaterials Week 8) Try to spot as many places as possiblethat the code is different from whatrsquos on screen
Viewing the page source
It is possible to look at the source code for any HTMLwebpage you visit
Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software
On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 16: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/16.jpg)
Here is a minimal HTML file
lthtmlgt
ltbodygt
ltpgtHello I am a webpageltpgt
ltbodygt
lthtmlgt
By copying and pasting this into Notepad (or any other texteditor) and saving it as indexhtml you will create a basicwebpage which will open in a web-browser
Notice the similarities to LATEXrsquos environments with each tagcoming in an opening and closing pair (ltpgt and ltpgt forexample)
The material to be displayed is put between the ltbodygt andltbodygt tags
(This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
Folders and filepaths
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages
You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say
Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder
move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file
then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Here imageslogojpg is called the URL (uniform resourcelocator) of the image
More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image
as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Hyperlinks
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages
allowing users toclick on words or images to get to new pages
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages allowing users toclick on words or images to get to new pages
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link
Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
Linking to external webpages such as the BBC website is alsoeasy
Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Filenames
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers)
and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML code
Mixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying
Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo
Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo
youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensions
You can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
Activity (Spot the difference with a difference) Thecirculated HTML code almost corresponds to the code for thewebpage linked from the course website (see PresentationMaterials Week 8) Try to spot as many places as possiblethat the code is different from whatrsquos on screen
Viewing the page source
It is possible to look at the source code for any HTMLwebpage you visit
Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software
On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 17: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/17.jpg)
The material to be displayed is put between the ltbodygt andltbodygt tags
(This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
Folders and filepaths
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages
You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say
Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder
move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file
then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Here imageslogojpg is called the URL (uniform resourcelocator) of the image
More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image
as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Hyperlinks
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages
allowing users toclick on words or images to get to new pages
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages allowing users toclick on words or images to get to new pages
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link
Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
Linking to external webpages such as the BBC website is alsoeasy
Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Filenames
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers)
and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML code
Mixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying
Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo
Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo
youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensions
You can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
Activity (Spot the difference with a difference) Thecirculated HTML code almost corresponds to the code for thewebpage linked from the course website (see PresentationMaterials Week 8) Try to spot as many places as possiblethat the code is different from whatrsquos on screen
Viewing the page source
It is possible to look at the source code for any HTMLwebpage you visit
Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software
On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 18: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/18.jpg)
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
Folders and filepaths
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages
You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say
Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder
move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file
then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Here imageslogojpg is called the URL (uniform resourcelocator) of the image
More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image
as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Hyperlinks
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages
allowing users toclick on words or images to get to new pages
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages allowing users toclick on words or images to get to new pages
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link
Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
Linking to external webpages such as the BBC website is alsoeasy
Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Filenames
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers)
and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML code
Mixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying
Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo
Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo
youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensions
You can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
Activity (Spot the difference with a difference) Thecirculated HTML code almost corresponds to the code for thewebpage linked from the course website (see PresentationMaterials Week 8) Try to spot as many places as possiblethat the code is different from whatrsquos on screen
Viewing the page source
It is possible to look at the source code for any HTMLwebpage you visit
Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software
On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 19: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/19.jpg)
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
Folders and filepaths
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages
You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say
Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder
move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file
then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Here imageslogojpg is called the URL (uniform resourcelocator) of the image
More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image
as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Hyperlinks
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages
allowing users toclick on words or images to get to new pages
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages allowing users toclick on words or images to get to new pages
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link
Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
Linking to external webpages such as the BBC website is alsoeasy
Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Filenames
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers)
and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML code
Mixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying
Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo
Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo
youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensions
You can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
Activity (Spot the difference with a difference) Thecirculated HTML code almost corresponds to the code for thewebpage linked from the course website (see PresentationMaterials Week 8) Try to spot as many places as possiblethat the code is different from whatrsquos on screen
Viewing the page source
It is possible to look at the source code for any HTMLwebpage you visit
Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software
On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 20: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/20.jpg)
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
Folders and filepaths
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages
You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say
Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder
move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file
then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Here imageslogojpg is called the URL (uniform resourcelocator) of the image
More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image
as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Hyperlinks
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages
allowing users toclick on words or images to get to new pages
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages allowing users toclick on words or images to get to new pages
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link
Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
Linking to external webpages such as the BBC website is alsoeasy
Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Filenames
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers)
and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML code
Mixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying
Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo
Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo
youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensions
You can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
Activity (Spot the difference with a difference) Thecirculated HTML code almost corresponds to the code for thewebpage linked from the course website (see PresentationMaterials Week 8) Try to spot as many places as possiblethat the code is different from whatrsquos on screen
Viewing the page source
It is possible to look at the source code for any HTMLwebpage you visit
Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software
On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 21: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/21.jpg)
The material to be displayed is put between the ltbodygt andltbodygt tags (This part is called the body of the document)
Paragraphs are built up using the ltpgt and ltpgt tags
Headings come in 6 different weightings and are made usingthe tags lth1gt to lth6gt (lth1gt being the largest)
Most content on a webpage is built up using these basic tags
Folders and filepaths
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages
You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say
Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder
move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file
then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Here imageslogojpg is called the URL (uniform resourcelocator) of the image
More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image
as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Hyperlinks
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages
allowing users toclick on words or images to get to new pages
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages allowing users toclick on words or images to get to new pages
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link
Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
Linking to external webpages such as the BBC website is alsoeasy
Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Filenames
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers)
and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML code
Mixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying
Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo
Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo
youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensions
You can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
Activity (Spot the difference with a difference) Thecirculated HTML code almost corresponds to the code for thewebpage linked from the course website (see PresentationMaterials Week 8) Try to spot as many places as possiblethat the code is different from whatrsquos on screen
Viewing the page source
It is possible to look at the source code for any HTMLwebpage you visit
Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software
On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 22: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/22.jpg)
Folders and filepaths
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages
You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say
Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder
move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file
then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Here imageslogojpg is called the URL (uniform resourcelocator) of the image
More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image
as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Hyperlinks
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages
allowing users toclick on words or images to get to new pages
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages allowing users toclick on words or images to get to new pages
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link
Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
Linking to external webpages such as the BBC website is alsoeasy
Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Filenames
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers)
and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML code
Mixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying
Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo
Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo
youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensions
You can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
Activity (Spot the difference with a difference) Thecirculated HTML code almost corresponds to the code for thewebpage linked from the course website (see PresentationMaterials Week 8) Try to spot as many places as possiblethat the code is different from whatrsquos on screen
Viewing the page source
It is possible to look at the source code for any HTMLwebpage you visit
Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software
On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 23: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/23.jpg)
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages
You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say
Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder
move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file
then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Here imageslogojpg is called the URL (uniform resourcelocator) of the image
More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image
as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Hyperlinks
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages
allowing users toclick on words or images to get to new pages
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages allowing users toclick on words or images to get to new pages
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link
Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
Linking to external webpages such as the BBC website is alsoeasy
Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Filenames
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers)
and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML code
Mixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying
Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo
Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo
youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensions
You can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
Activity (Spot the difference with a difference) Thecirculated HTML code almost corresponds to the code for thewebpage linked from the course website (see PresentationMaterials Week 8) Try to spot as many places as possiblethat the code is different from whatrsquos on screen
Viewing the page source
It is possible to look at the source code for any HTMLwebpage you visit
Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software
On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 24: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/24.jpg)
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say
Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder
move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file
then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Here imageslogojpg is called the URL (uniform resourcelocator) of the image
More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image
as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Hyperlinks
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages
allowing users toclick on words or images to get to new pages
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages allowing users toclick on words or images to get to new pages
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link
Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
Linking to external webpages such as the BBC website is alsoeasy
Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Filenames
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers)
and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML code
Mixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying
Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo
Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo
youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensions
You can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
Activity (Spot the difference with a difference) Thecirculated HTML code almost corresponds to the code for thewebpage linked from the course website (see PresentationMaterials Week 8) Try to spot as many places as possiblethat the code is different from whatrsquos on screen
Viewing the page source
It is possible to look at the source code for any HTMLwebpage you visit
Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software
On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 25: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/25.jpg)
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder
move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file
then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Here imageslogojpg is called the URL (uniform resourcelocator) of the image
More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image
as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Hyperlinks
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages
allowing users toclick on words or images to get to new pages
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages allowing users toclick on words or images to get to new pages
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link
Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
Linking to external webpages such as the BBC website is alsoeasy
Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Filenames
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers)
and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML code
Mixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying
Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo
Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo
youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensions
You can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
Activity (Spot the difference with a difference) Thecirculated HTML code almost corresponds to the code for thewebpage linked from the course website (see PresentationMaterials Week 8) Try to spot as many places as possiblethat the code is different from whatrsquos on screen
Viewing the page source
It is possible to look at the source code for any HTMLwebpage you visit
Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software
On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 26: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/26.jpg)
Suppose you have created a webpage called indexhtml andsaved it in a folder called webpages You may want to includean image on your page called logojpg say Start by savingthis in the webpages folder
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder
move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file
then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Here imageslogojpg is called the URL (uniform resourcelocator) of the image
More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image
as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Hyperlinks
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages
allowing users toclick on words or images to get to new pages
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages allowing users toclick on words or images to get to new pages
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link
Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
Linking to external webpages such as the BBC website is alsoeasy
Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Filenames
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers)
and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML code
Mixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying
Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo
Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo
youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensions
You can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
Activity (Spot the difference with a difference) Thecirculated HTML code almost corresponds to the code for thewebpage linked from the course website (see PresentationMaterials Week 8) Try to spot as many places as possiblethat the code is different from whatrsquos on screen
Viewing the page source
It is possible to look at the source code for any HTMLwebpage you visit
Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software
On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 27: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/27.jpg)
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder
move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file
then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Here imageslogojpg is called the URL (uniform resourcelocator) of the image
More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image
as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Hyperlinks
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages
allowing users toclick on words or images to get to new pages
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages allowing users toclick on words or images to get to new pages
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link
Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
Linking to external webpages such as the BBC website is alsoeasy
Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Filenames
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers)
and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML code
Mixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying
Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo
Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo
youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensions
You can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
Activity (Spot the difference with a difference) Thecirculated HTML code almost corresponds to the code for thewebpage linked from the course website (see PresentationMaterials Week 8) Try to spot as many places as possiblethat the code is different from whatrsquos on screen
Viewing the page source
It is possible to look at the source code for any HTMLwebpage you visit
Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software
On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 28: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/28.jpg)
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder
move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file
then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Here imageslogojpg is called the URL (uniform resourcelocator) of the image
More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image
as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Hyperlinks
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages
allowing users toclick on words or images to get to new pages
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages allowing users toclick on words or images to get to new pages
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link
Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
Linking to external webpages such as the BBC website is alsoeasy
Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Filenames
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers)
and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML code
Mixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying
Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo
Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo
youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensions
You can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
Activity (Spot the difference with a difference) Thecirculated HTML code almost corresponds to the code for thewebpage linked from the course website (see PresentationMaterials Week 8) Try to spot as many places as possiblethat the code is different from whatrsquos on screen
Viewing the page source
It is possible to look at the source code for any HTMLwebpage you visit
Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software
On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 29: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/29.jpg)
You can then include the image on your page with thecommand
ltimg src=logojpggt
(Note that the this tag is unusual in that it doesnrsquot come in apair)
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder
move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file
then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Here imageslogojpg is called the URL (uniform resourcelocator) of the image
More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image
as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Hyperlinks
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages
allowing users toclick on words or images to get to new pages
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages allowing users toclick on words or images to get to new pages
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link
Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
Linking to external webpages such as the BBC website is alsoeasy
Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Filenames
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers)
and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML code
Mixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying
Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo
Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo
youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensions
You can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
Activity (Spot the difference with a difference) Thecirculated HTML code almost corresponds to the code for thewebpage linked from the course website (see PresentationMaterials Week 8) Try to spot as many places as possiblethat the code is different from whatrsquos on screen
Viewing the page source
It is possible to look at the source code for any HTMLwebpage you visit
Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software
On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 30: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/30.jpg)
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder
move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file
then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Here imageslogojpg is called the URL (uniform resourcelocator) of the image
More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image
as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Hyperlinks
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages
allowing users toclick on words or images to get to new pages
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages allowing users toclick on words or images to get to new pages
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link
Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
Linking to external webpages such as the BBC website is alsoeasy
Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Filenames
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers)
and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML code
Mixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying
Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo
Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo
youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensions
You can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
Activity (Spot the difference with a difference) Thecirculated HTML code almost corresponds to the code for thewebpage linked from the course website (see PresentationMaterials Week 8) Try to spot as many places as possiblethat the code is different from whatrsquos on screen
Viewing the page source
It is possible to look at the source code for any HTMLwebpage you visit
Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software
On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 31: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/31.jpg)
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder
move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file
then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Here imageslogojpg is called the URL (uniform resourcelocator) of the image
More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image
as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Hyperlinks
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages
allowing users toclick on words or images to get to new pages
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages allowing users toclick on words or images to get to new pages
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link
Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
Linking to external webpages such as the BBC website is alsoeasy
Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Filenames
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers)
and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML code
Mixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying
Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo
Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo
youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensions
You can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
Activity (Spot the difference with a difference) Thecirculated HTML code almost corresponds to the code for thewebpage linked from the course website (see PresentationMaterials Week 8) Try to spot as many places as possiblethat the code is different from whatrsquos on screen
Viewing the page source
It is possible to look at the source code for any HTMLwebpage you visit
Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software
On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 32: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/32.jpg)
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder
move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file
then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Here imageslogojpg is called the URL (uniform resourcelocator) of the image
More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image
as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Hyperlinks
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages
allowing users toclick on words or images to get to new pages
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages allowing users toclick on words or images to get to new pages
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link
Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
Linking to external webpages such as the BBC website is alsoeasy
Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Filenames
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers)
and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML code
Mixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying
Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo
Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo
youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensions
You can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
Activity (Spot the difference with a difference) Thecirculated HTML code almost corresponds to the code for thewebpage linked from the course website (see PresentationMaterials Week 8) Try to spot as many places as possiblethat the code is different from whatrsquos on screen
Viewing the page source
It is possible to look at the source code for any HTMLwebpage you visit
Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software
On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 33: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/33.jpg)
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file
then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Here imageslogojpg is called the URL (uniform resourcelocator) of the image
More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image
as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Hyperlinks
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages
allowing users toclick on words or images to get to new pages
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages allowing users toclick on words or images to get to new pages
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link
Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
Linking to external webpages such as the BBC website is alsoeasy
Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Filenames
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers)
and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML code
Mixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying
Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo
Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo
youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensions
You can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
Activity (Spot the difference with a difference) Thecirculated HTML code almost corresponds to the code for thewebpage linked from the course website (see PresentationMaterials Week 8) Try to spot as many places as possiblethat the code is different from whatrsquos on screen
Viewing the page source
It is possible to look at the source code for any HTMLwebpage you visit
Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software
On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 34: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/34.jpg)
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Here imageslogojpg is called the URL (uniform resourcelocator) of the image
More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image
as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Hyperlinks
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages
allowing users toclick on words or images to get to new pages
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages allowing users toclick on words or images to get to new pages
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link
Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
Linking to external webpages such as the BBC website is alsoeasy
Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Filenames
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers)
and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML code
Mixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying
Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo
Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo
youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensions
You can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
Activity (Spot the difference with a difference) Thecirculated HTML code almost corresponds to the code for thewebpage linked from the course website (see PresentationMaterials Week 8) Try to spot as many places as possiblethat the code is different from whatrsquos on screen
Viewing the page source
It is possible to look at the source code for any HTMLwebpage you visit
Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software
On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 35: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/35.jpg)
Suppose you decide yoursquod rather keep the images in asubfolder of webpages called images to reduce clutter
All you need to do is create the folder move the logojpg
file then update your HTML to read
ltimg src=imageslogojpggt
Here imageslogojpg is called the URL (uniform resourcelocator) of the image
More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image
as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Hyperlinks
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages
allowing users toclick on words or images to get to new pages
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages allowing users toclick on words or images to get to new pages
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link
Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
Linking to external webpages such as the BBC website is alsoeasy
Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Filenames
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers)
and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML code
Mixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying
Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo
Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo
youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensions
You can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
Activity (Spot the difference with a difference) Thecirculated HTML code almost corresponds to the code for thewebpage linked from the course website (see PresentationMaterials Week 8) Try to spot as many places as possiblethat the code is different from whatrsquos on screen
Viewing the page source
It is possible to look at the source code for any HTMLwebpage you visit
Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software
On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 36: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/36.jpg)
Here imageslogojpg is called the URL (uniform resourcelocator) of the image
More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image
as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Hyperlinks
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages
allowing users toclick on words or images to get to new pages
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages allowing users toclick on words or images to get to new pages
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link
Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
Linking to external webpages such as the BBC website is alsoeasy
Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Filenames
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers)
and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML code
Mixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying
Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo
Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo
youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensions
You can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
Activity (Spot the difference with a difference) Thecirculated HTML code almost corresponds to the code for thewebpage linked from the course website (see PresentationMaterials Week 8) Try to spot as many places as possiblethat the code is different from whatrsquos on screen
Viewing the page source
It is possible to look at the source code for any HTMLwebpage you visit
Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software
On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 37: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/37.jpg)
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image
as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Hyperlinks
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages
allowing users toclick on words or images to get to new pages
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages allowing users toclick on words or images to get to new pages
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link
Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
Linking to external webpages such as the BBC website is alsoeasy
Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Filenames
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers)
and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML code
Mixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying
Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo
Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo
youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensions
You can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
Activity (Spot the difference with a difference) Thecirculated HTML code almost corresponds to the code for thewebpage linked from the course website (see PresentationMaterials Week 8) Try to spot as many places as possiblethat the code is different from whatrsquos on screen
Viewing the page source
It is possible to look at the source code for any HTMLwebpage you visit
Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software
On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 38: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/38.jpg)
Here imageslogojpg is called the URL (uniform resourcelocator) of the image More precisely this is the relative URLof the image as it tells the computer how to find the imagestarting from the folder in which the page itself sits
Hyperlinks
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages
allowing users toclick on words or images to get to new pages
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages allowing users toclick on words or images to get to new pages
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link
Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
Linking to external webpages such as the BBC website is alsoeasy
Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Filenames
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers)
and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML code
Mixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying
Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo
Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo
youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensions
You can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
Activity (Spot the difference with a difference) Thecirculated HTML code almost corresponds to the code for thewebpage linked from the course website (see PresentationMaterials Week 8) Try to spot as many places as possiblethat the code is different from whatrsquos on screen
Viewing the page source
It is possible to look at the source code for any HTMLwebpage you visit
Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software
On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 39: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/39.jpg)
Hyperlinks
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages
allowing users toclick on words or images to get to new pages
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages allowing users toclick on words or images to get to new pages
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link
Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
Linking to external webpages such as the BBC website is alsoeasy
Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Filenames
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers)
and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML code
Mixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying
Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo
Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo
youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensions
You can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
Activity (Spot the difference with a difference) Thecirculated HTML code almost corresponds to the code for thewebpage linked from the course website (see PresentationMaterials Week 8) Try to spot as many places as possiblethat the code is different from whatrsquos on screen
Viewing the page source
It is possible to look at the source code for any HTMLwebpage you visit
Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software
On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 40: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/40.jpg)
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages
allowing users toclick on words or images to get to new pages
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages allowing users toclick on words or images to get to new pages
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link
Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
Linking to external webpages such as the BBC website is alsoeasy
Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Filenames
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers)
and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML code
Mixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying
Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo
Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo
youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensions
You can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
Activity (Spot the difference with a difference) Thecirculated HTML code almost corresponds to the code for thewebpage linked from the course website (see PresentationMaterials Week 8) Try to spot as many places as possiblethat the code is different from whatrsquos on screen
Viewing the page source
It is possible to look at the source code for any HTMLwebpage you visit
Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software
On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 41: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/41.jpg)
One big reason that the world-wide web has been so successfulis the provision of hyperlinks in webpages allowing users toclick on words or images to get to new pages
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link
Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
Linking to external webpages such as the BBC website is alsoeasy
Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Filenames
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers)
and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML code
Mixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying
Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo
Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo
youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensions
You can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
Activity (Spot the difference with a difference) Thecirculated HTML code almost corresponds to the code for thewebpage linked from the course website (see PresentationMaterials Week 8) Try to spot as many places as possiblethat the code is different from whatrsquos on screen
Viewing the page source
It is possible to look at the source code for any HTMLwebpage you visit
Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software
On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 42: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/42.jpg)
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link
Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
Linking to external webpages such as the BBC website is alsoeasy
Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Filenames
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers)
and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML code
Mixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying
Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo
Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo
youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensions
You can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
Activity (Spot the difference with a difference) Thecirculated HTML code almost corresponds to the code for thewebpage linked from the course website (see PresentationMaterials Week 8) Try to spot as many places as possiblethat the code is different from whatrsquos on screen
Viewing the page source
It is possible to look at the source code for any HTMLwebpage you visit
Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software
On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 43: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/43.jpg)
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link
Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
Linking to external webpages such as the BBC website is alsoeasy
Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Filenames
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers)
and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML code
Mixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying
Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo
Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo
youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensions
You can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
Activity (Spot the difference with a difference) Thecirculated HTML code almost corresponds to the code for thewebpage linked from the course website (see PresentationMaterials Week 8) Try to spot as many places as possiblethat the code is different from whatrsquos on screen
Viewing the page source
It is possible to look at the source code for any HTMLwebpage you visit
Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software
On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 44: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/44.jpg)
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link
Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
Linking to external webpages such as the BBC website is alsoeasy
Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Filenames
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers)
and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML code
Mixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying
Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo
Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo
youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensions
You can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
Activity (Spot the difference with a difference) Thecirculated HTML code almost corresponds to the code for thewebpage linked from the course website (see PresentationMaterials Week 8) Try to spot as many places as possiblethat the code is different from whatrsquos on screen
Viewing the page source
It is possible to look at the source code for any HTMLwebpage you visit
Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software
On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 45: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/45.jpg)
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link
Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
Linking to external webpages such as the BBC website is alsoeasy
Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Filenames
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers)
and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML code
Mixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying
Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo
Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo
youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensions
You can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
Activity (Spot the difference with a difference) Thecirculated HTML code almost corresponds to the code for thewebpage linked from the course website (see PresentationMaterials Week 8) Try to spot as many places as possiblethat the code is different from whatrsquos on screen
Viewing the page source
It is possible to look at the source code for any HTMLwebpage you visit
Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software
On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 46: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/46.jpg)
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link
Notice thatwersquove used a relative filepath
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
Linking to external webpages such as the BBC website is alsoeasy
Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Filenames
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers)
and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML code
Mixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying
Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo
Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo
youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensions
You can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
Activity (Spot the difference with a difference) Thecirculated HTML code almost corresponds to the code for thewebpage linked from the course website (see PresentationMaterials Week 8) Try to spot as many places as possiblethat the code is different from whatrsquos on screen
Viewing the page source
It is possible to look at the source code for any HTMLwebpage you visit
Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software
On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 47: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/47.jpg)
Suppose we have two webpages page1html andpage2html both sitting in the same folder
To create a hyperlink in page1 which points to page2 we use
lta href=page2htmlgtClick for page 2ltagt
This creates the text lsquoClick for page 2rsquo as a link Notice thatwersquove used a relative filepath
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
Linking to external webpages such as the BBC website is alsoeasy
Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Filenames
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers)
and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML code
Mixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying
Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo
Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo
youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensions
You can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
Activity (Spot the difference with a difference) Thecirculated HTML code almost corresponds to the code for thewebpage linked from the course website (see PresentationMaterials Week 8) Try to spot as many places as possiblethat the code is different from whatrsquos on screen
Viewing the page source
It is possible to look at the source code for any HTMLwebpage you visit
Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software
On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 48: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/48.jpg)
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
Linking to external webpages such as the BBC website is alsoeasy
Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Filenames
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers)
and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML code
Mixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying
Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo
Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo
youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensions
You can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
Activity (Spot the difference with a difference) Thecirculated HTML code almost corresponds to the code for thewebpage linked from the course website (see PresentationMaterials Week 8) Try to spot as many places as possiblethat the code is different from whatrsquos on screen
Viewing the page source
It is possible to look at the source code for any HTMLwebpage you visit
Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software
On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 49: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/49.jpg)
If page2html was inside a subfolder called pages we wouldinstead do
lta href=pagespage2htmlgtClick for page 2ltagt
Linking to external webpages such as the BBC website is alsoeasy
Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Filenames
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers)
and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML code
Mixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying
Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo
Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo
youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensions
You can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
Activity (Spot the difference with a difference) Thecirculated HTML code almost corresponds to the code for thewebpage linked from the course website (see PresentationMaterials Week 8) Try to spot as many places as possiblethat the code is different from whatrsquos on screen
Viewing the page source
It is possible to look at the source code for any HTMLwebpage you visit
Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software
On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 50: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/50.jpg)
Linking to external webpages such as the BBC website is alsoeasy
Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Filenames
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers)
and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML code
Mixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying
Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo
Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo
youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensions
You can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
Activity (Spot the difference with a difference) Thecirculated HTML code almost corresponds to the code for thewebpage linked from the course website (see PresentationMaterials Week 8) Try to spot as many places as possiblethat the code is different from whatrsquos on screen
Viewing the page source
It is possible to look at the source code for any HTMLwebpage you visit
Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software
On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 51: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/51.jpg)
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Filenames
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers)
and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML code
Mixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying
Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo
Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo
youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensions
You can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
Activity (Spot the difference with a difference) Thecirculated HTML code almost corresponds to the code for thewebpage linked from the course website (see PresentationMaterials Week 8) Try to spot as many places as possiblethat the code is different from whatrsquos on screen
Viewing the page source
It is possible to look at the source code for any HTMLwebpage you visit
Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software
On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 52: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/52.jpg)
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Filenames
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers)
and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML code
Mixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying
Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo
Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo
youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensions
You can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
Activity (Spot the difference with a difference) Thecirculated HTML code almost corresponds to the code for thewebpage linked from the course website (see PresentationMaterials Week 8) Try to spot as many places as possiblethat the code is different from whatrsquos on screen
Viewing the page source
It is possible to look at the source code for any HTMLwebpage you visit
Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software
On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 53: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/53.jpg)
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Filenames
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers)
and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML code
Mixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying
Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo
Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo
youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensions
You can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
Activity (Spot the difference with a difference) Thecirculated HTML code almost corresponds to the code for thewebpage linked from the course website (see PresentationMaterials Week 8) Try to spot as many places as possiblethat the code is different from whatrsquos on screen
Viewing the page source
It is possible to look at the source code for any HTMLwebpage you visit
Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software
On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 54: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/54.jpg)
Linking to external webpages such as the BBC website is alsoeasy Here we use an absolute URL
lta href=httpwwwbbccoukgtBBC webpageltagt
It is best to use relative URLs within your own site only usingabsolute URLs when you need to link to another website
Note the necessary http part
Filenames
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers)
and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML code
Mixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying
Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo
Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo
youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensions
You can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
Activity (Spot the difference with a difference) Thecirculated HTML code almost corresponds to the code for thewebpage linked from the course website (see PresentationMaterials Week 8) Try to spot as many places as possiblethat the code is different from whatrsquos on screen
Viewing the page source
It is possible to look at the source code for any HTMLwebpage you visit
Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software
On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 55: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/55.jpg)
Filenames
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers)
and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML code
Mixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying
Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo
Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo
youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensions
You can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
Activity (Spot the difference with a difference) Thecirculated HTML code almost corresponds to the code for thewebpage linked from the course website (see PresentationMaterials Week 8) Try to spot as many places as possiblethat the code is different from whatrsquos on screen
Viewing the page source
It is possible to look at the source code for any HTMLwebpage you visit
Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software
On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 56: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/56.jpg)
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers)
and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML code
Mixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying
Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo
Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo
youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensions
You can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
Activity (Spot the difference with a difference) Thecirculated HTML code almost corresponds to the code for thewebpage linked from the course website (see PresentationMaterials Week 8) Try to spot as many places as possiblethat the code is different from whatrsquos on screen
Viewing the page source
It is possible to look at the source code for any HTMLwebpage you visit
Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software
On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 57: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/57.jpg)
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML code
Mixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying
Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo
Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo
youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensions
You can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
Activity (Spot the difference with a difference) Thecirculated HTML code almost corresponds to the code for thewebpage linked from the course website (see PresentationMaterials Week 8) Try to spot as many places as possiblethat the code is different from whatrsquos on screen
Viewing the page source
It is possible to look at the source code for any HTMLwebpage you visit
Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software
On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 58: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/58.jpg)
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML code
Mixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying
Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo
Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo
youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensions
You can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
Activity (Spot the difference with a difference) Thecirculated HTML code almost corresponds to the code for thewebpage linked from the course website (see PresentationMaterials Week 8) Try to spot as many places as possiblethat the code is different from whatrsquos on screen
Viewing the page source
It is possible to look at the source code for any HTMLwebpage you visit
Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software
On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 59: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/59.jpg)
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying
Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo
Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo
youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensions
You can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
Activity (Spot the difference with a difference) Thecirculated HTML code almost corresponds to the code for thewebpage linked from the course website (see PresentationMaterials Week 8) Try to spot as many places as possiblethat the code is different from whatrsquos on screen
Viewing the page source
It is possible to look at the source code for any HTMLwebpage you visit
Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software
On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 60: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/60.jpg)
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo
Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo
youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensions
You can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
Activity (Spot the difference with a difference) Thecirculated HTML code almost corresponds to the code for thewebpage linked from the course website (see PresentationMaterials Week 8) Try to spot as many places as possiblethat the code is different from whatrsquos on screen
Viewing the page source
It is possible to look at the source code for any HTMLwebpage you visit
Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software
On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 61: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/61.jpg)
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo
Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo
youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensions
You can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
Activity (Spot the difference with a difference) Thecirculated HTML code almost corresponds to the code for thewebpage linked from the course website (see PresentationMaterials Week 8) Try to spot as many places as possiblethat the code is different from whatrsquos on screen
Viewing the page source
It is possible to look at the source code for any HTMLwebpage you visit
Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software
On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 62: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/62.jpg)
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo
youshould go for lsquomy_page_1htmlrsquo
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensions
You can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
Activity (Spot the difference with a difference) Thecirculated HTML code almost corresponds to the code for thewebpage linked from the course website (see PresentationMaterials Week 8) Try to spot as many places as possiblethat the code is different from whatrsquos on screen
Viewing the page source
It is possible to look at the source code for any HTMLwebpage you visit
Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software
On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 63: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/63.jpg)
Important
When choosing names for HTML files or pictures you shouldonly use lowercase letters (andor numbers) and never usespaces
Filenames must be identical in any links in the HTML codeMixing the cases of letters leads to broken links or pictures notdisplaying Even if you get away with it on your computer itwonrsquot work when your website goes live
Instead of using spaces you should use underscores lsquo_rsquo Forexample rather than naming a file lsquoMy page 1htmlrsquo youshould go for lsquomy_page_1htmlrsquo
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensions
You can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
Activity (Spot the difference with a difference) Thecirculated HTML code almost corresponds to the code for thewebpage linked from the course website (see PresentationMaterials Week 8) Try to spot as many places as possiblethat the code is different from whatrsquos on screen
Viewing the page source
It is possible to look at the source code for any HTMLwebpage you visit
Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software
On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 64: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/64.jpg)
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensions
You can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
Activity (Spot the difference with a difference) Thecirculated HTML code almost corresponds to the code for thewebpage linked from the course website (see PresentationMaterials Week 8) Try to spot as many places as possiblethat the code is different from whatrsquos on screen
Viewing the page source
It is possible to look at the source code for any HTMLwebpage you visit
Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software
On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 65: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/65.jpg)
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensions
You can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
Activity (Spot the difference with a difference) Thecirculated HTML code almost corresponds to the code for thewebpage linked from the course website (see PresentationMaterials Week 8) Try to spot as many places as possiblethat the code is different from whatrsquos on screen
Viewing the page source
It is possible to look at the source code for any HTMLwebpage you visit
Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software
On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 66: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/66.jpg)
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
Activity (Spot the difference with a difference) Thecirculated HTML code almost corresponds to the code for thewebpage linked from the course website (see PresentationMaterials Week 8) Try to spot as many places as possiblethat the code is different from whatrsquos on screen
Viewing the page source
It is possible to look at the source code for any HTMLwebpage you visit
Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software
On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 67: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/67.jpg)
A related thing that can catch people out is problems with fileextensions (eg jpeg or png)
By default Windows no longer shows these file extensionsYou can change the default setting in Windows (Google it)
We have seen problems where files have filenames likersquofile1JPGrsquo rather than rsquofile1jpgrsquo which stops the picture fromappearing
Activity (Spot the difference with a difference) Thecirculated HTML code almost corresponds to the code for thewebpage linked from the course website (see PresentationMaterials Week 8) Try to spot as many places as possiblethat the code is different from whatrsquos on screen
Viewing the page source
It is possible to look at the source code for any HTMLwebpage you visit
Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software
On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 68: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/68.jpg)
Activity (Spot the difference with a difference) Thecirculated HTML code almost corresponds to the code for thewebpage linked from the course website (see PresentationMaterials Week 8) Try to spot as many places as possiblethat the code is different from whatrsquos on screen
Viewing the page source
It is possible to look at the source code for any HTMLwebpage you visit
Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software
On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 69: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/69.jpg)
Viewing the page source
It is possible to look at the source code for any HTMLwebpage you visit
Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software
On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 70: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/70.jpg)
It is possible to look at the source code for any HTMLwebpage you visit
Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software
On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 71: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/71.jpg)
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software
On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 72: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/72.jpg)
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 73: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/73.jpg)
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 74: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/74.jpg)
It is possible to look at the source code for any HTMLwebpage you visit Some pages have complicated HTMLoften generated by software On others you will find very plainHTML
To view the source usually you can right-click on the pageand select lsquoview sourcersquo (or similar)
I expect most of the module webpages made by your lecturerswill be simple to read so you could have a look at those
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 75: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/75.jpg)
Structuring web pages
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 76: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/76.jpg)
Some web pages are easier to navigate than others
A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 77: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/77.jpg)
Some web pages are easier to navigate than others A menu ornavigation bar can help
Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 78: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/78.jpg)
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 79: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/79.jpg)
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu
When marking student websitessometimes itrsquos hard to be sure every page has been read
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 80: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/80.jpg)
Some web pages are easier to navigate than others A menu ornavigation bar can help Another option is a site-map whichlists the entire content of the site
Try to structure websites logically and avoid links to pagesthat donrsquot appear on a menu When marking student websitessometimes itrsquos hard to be sure every page has been read
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 81: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/81.jpg)
Semester 1 mini-project reminder
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 82: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/82.jpg)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 83: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/83.jpg)
The first mini-project must be submitted by shortly aftermidnight at the end of tomorrow (Wednesday 17 November)Please do make sure you submit as it counts towards yourfinal module grade
If you are stuck remember to make use of the discussionboard and contact either me or Alex if yoursquore in realdifficulties If you havenrsquot yet started therersquos still time (just)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-
![Page 84: An introduction to HTML - University of Sheffield](https://reader033.fdocuments.in/reader033/viewer/2022041710/6253a86f5a0a1213406ec861/html5/thumbnails/84.jpg)
About the Week 8 Computer Lab
In this weekrsquos computer lab wersquoll start looking at HTML andcreate some basic webpages
- An introduction to HTML
-
- What is HTML
- Folders and filepaths
- Hyperlinks
- Filenames
- Viewing the page source
- Structuring web pages
-
- Semester 1 mini-project reminder
-