CREATING WEBSITES. What you need to build a website Part One The Basics. Chas Large. Welcome one and all

Transcription

1 Slide 1 CREATING WEBSITES What you need to build a website Part One The Basics Chas Large Welcome one and all Short intro about Chas large TV engineer, computer geek, self taught, became IT manager in 2000, spent 15 years developing skills.

2 Slide 2 Agenda Brief history of the web What does a website consist of? What do I need to build one? Building a basic web page Do it with style Questions What The Web is The parts of a typical Basic website What tools and software will be needed How to build and display a basic webpage How to make it look more than just plain text A Q&A session but feel free to ask during the presentation.

3 Slide 3 A Brief History of the Web The web or World Wide Web was invented by Tim Berners-Lee in 1989 The web is part of but is not the Internet By 1990, Tim had written three fundamental technologies to form the foundation of the web. HTML: HyperText Markup Language URI: Uniform Resource Identifier Also know as URL HTTP: Hypertext Transfer Protocol The Internet was begun as ARPANET in the late 1960 s Not really forming full connectivity until 1972 when the first s began The web is ONLY PART of the INTERNET being a concept idea of Tim Berners-lee Tim came up with the PROTOCOLS and LANGUAGE we use today to create web sites. HTML HyperText Markup Language The Uniform Resource Identifier also called UR Locator essentially an address on the web HTTP The HyperText Transfer Protocol the means by which the pages are transferred over the Internet. Links to sources:

4 Slide 4 What does a website consist of? A basic website consists of FOUR major parts A domain name or URL Some form of on-line storage An Index page Some interesting content A website needs FOUR major parts in order for others to view it. A domain name This is recorded in a directory against a physical computer address (URL). It is looked up by browsers using a system known as DNS Dynamic Name System. Somewhere for the files to be kept and Served to visitors A Web Server A starting or Index page a home page. And of course, something for visitors to see when they get there!

5 Slide 5 What do I need to build one? A domain name You can register a domain name through many providers Some on-line storage This is often called Web Space or Hosting Space A text editor This is used to create the content like the index page A means to Upload your content FTP or some other web drive software to send the files to your new site Whilst a website can be hosted on a home computer, it would rely on visitors being told the IP address of your home computer and you d need to edit the firewall on your router to allow access through to port 80, this could also allow unwanted access. Find your own IP at If you plan to make the site visible to viewers, then it needs to be on a server with a name that means visitors can find it. Visitors find websites by entering the Domain Name an easily understood name and then a Domain Name Server (DNS) is used to look up the real physical (IP) address of the site. So my site for example sits on my server at However, to make a simple page all you need is a plain text editor, and a web browser. You don t even need access to the internet. A page can be created and viewed in a browser just like a document in WORD or some other Text file. You can create web pages in WORD but they tent to be bloated with background code that Microsoft puts in them Once you have created your web page(s) you can upload them to your host computer a number of ways. File Transfer Protocol (FTP), WebDisk (a synchronised link to a folder on your computer of your hosting company s supplied file management system.

6 Slide 6 Building a basic web page Domain registration and web space rented? Then lets begin building a web page! Using a Plain Text Editor we create the Index page This is named index.html or index.htm In this page we insert HTML TAGS so that the web browser recognises the text functionality Assuming you want to make it live, let s get started making it locally first so we can test it before putting it On Line The Index page has to have an extension that web browsers recognise, this can be htm, html, php, asp, and many more but is usually one of the first three. Open text editor, enter, This is a web page save it with the name index.html on desktop

7 In Chrome, do CTRL + O to open the file dialog and browse to desktop to open the file. As can be seen, the page has just plain text, nothing special. Next we add dome more text and make the text look different and behave differently by using HTML Tags either end of the section or words. The web page consists of different sections, the HEADER contains such details as the site name, description and links to style sheets and scripts. This is hidden from view but is there in the background so that the browser can bring up any resources needed to make the page appear as it was designed to be seen. Next is the BODY section, this contains the bulk of the content of the page and is normally reserved for text and links with some local styling script. There can also be a FOOTER section of the page but this is rarely used nowadays.

8 The Tags in HTML always reside inside < and >. The CLOSING tag has a forward slash / after the <. So to Embolden some text you would use the Strong tag like this: <strong>this text appears emboldened</strong> You can edit the text file in your text editor AND view its appearance in your browser at the same time. Any change you make, once saved can be reviewed by doing a RELOAD in the browser by pressing CTRL + F5 keys simultaneously. Most tags are easily recognised as they tend to use real words or initial letters as in the page above: A Paragraph is <P> Unordered List is <UL> List Item is <LI> You can add unseen comments to HTML pages, which can be useful for defining different areas of your code. These comments reside in special comments tags like this: <!- - comment goes here - -> These tags can be used to create all kinds of formatting. There are too many to discuss here but visit to see them all, what they do and experiment on an interactive page.

9 Slide 7 Important things about the web Once the web page is written, it is uploaded (copied) to the hosting site This is usually in the public_html folder of the server Web sites traditionally use UNIX or LINUX Servers Files on web sites are strictly case sensitive Index.html is not the same as index.html Files need permissions We have written the web page in plain text and tested it locally Now we have to get it on the web so others can see it. We need two things. 1. Some form of hosting service 2. Some means to upload the file There are many web services to choose from, the reasons are many but I look for good after sales service as the main criteria. Experience has taken me across many leading to WHUK as the best. Uploading the files can be carried out in a number of ways. The services control panel File Manager. A webdrive synchronised folder on the PC to the web service location. Finally FTP or File Transfer Protocol. Links to Domain registration and hosting companies:

10 Slide 8 Changing to Look of it To change the look of the page you need STYLE Styles can be applied in the page But this is laborious if you have lots of pages Styles are best done with CSS CSS = Cascading Style Sheets Styles can be easily changed site wide with CSS A brief look at a CSS. As we have seen, the page look can be changed by using tags We can add tags all over the page. But what if we have lots of pages? Whilst tags can be added to them all, if there are things on all the pages which need the same look then it makes sense to use some form of GLOBAL style to affect them all. This is achieved using Cascading Style Sheets or CSS. Let s look at how. Here is our index.html page once more but this time with a link to a local CSS which must reside in the same root directory (folder) as the page.

11 Now whilst the tags used are the same as before, we can change the STYLE of these tags from the standard default a browser would apply to something else we desire.

12 Here is the CSS page. Here we can set the colour of the page background so something other than the default WHITE. We have chosen a colour using a HEXADECIMAL code from a color picker (American color is used on the web). and the code represents variations of Red, Green and Blue, so the code = 99 in Red, 8c in Green and 2f in Blue. The code must always be preceded by a HASH (#) symbol. Alternatively we can use standard English names like White, Red, Green, Black etc but codes are preferable for variations. In CSS you can add comments but this time you use /* and */ either side of the comment. Comment tags are also useful for temporarily disabling parts of a CSS if you need to change the style but do not want to delete it or you re diagnosing a problem. Just surround the code with a comment tag before and after.

13 Slide 9 Thank you for your time and attention today, I hope this copy of the presentation contains all the things you wanted to remember but do feel free to send me an or use the contact me form on my website if you need to get in touch. Part two will look at styling, adding links and images and introduce WAMPP, a web server for the PC for building and testing more complex sites. We ll look at why this is needed over just opening files in the browser. Part three will be about using a web template service to create a Ready Made site. And will introduce a Content Management System (CMS) called Joomla and running this on WAMPP Part four will be about building a fully functional website using Joomla CMS and exploring what it can do. Regards Chas Large.