In 1980, physicist Tim Berners-Lee at CERN, proposed a digital document sharing system.
In this tutorial 0-1 we attempt to add a picture and title but its a mess! In the next tutorial we'll tidy it up.
The files underlying these web-pages are specially created so as to be clear and so as to serve as the material from which you can start to learn.
You can take the underlying files and make changes to them to see the effects of those changes.
By changing the text and the images to be your own you will start to create your own web-page and finally your own web-site.
The HTML for this page is contained in a file called "index.html". There is a second file called "style.css" which determines the layout style of this page. Both files are intended for you to look at and learn from. There is no Javascript for this page. The html and css files can be downloaded as a Zip File for every tutorial so you can work on them yourself. You can Download Zip Files for this tutorial just by clicking the link. However what you will get is a file with the extension .txt which your browser will probably display as complete garbage! You must save the page but change the extension from .txt to .zip You can then deal with the file in the same way as you would handle with any .zip file on your computer. (This fuss is because newer browsers won't let you download .zip files from non-https web sites.)
Files ending .html, .css and .js can be opened in a simple text editor to look at and edit.
Files ending .html can be dragged and dropped on a browser to see the web pages they represent.
I normally have an editor open and a browser at the same time, showing the page, so I can edit a file save it and then refresh the browser to see the results of my changes on the page. I suggest you work the same way.
Some editors interpret HTML and work a bit like web browsers. You need an editor that just shows you the plain text or you won't see all the HTML tags properly. Though if your editor has "syntax highlighting" that will help you a lot.
Files can be downloaded as a Zip File for every tutorial, so you can work on them yourself. All files are extensively commented and I would recommend removing some of the comments once you understand what they are explaining. After all these comments are there for teaching. Once you understand the points they explain then you should reduce the comments to only what is necessary for someone who has already learned what is needed.
Although there are many things like "Wix" and "Square Space" to help you make a simple website, sooner of later, as you add complexity, you will have to use bits of HTML, CSS and Javascript, the languages that "Wix" and "Square Space" etc. will always turn your web-pages into anyway.
To start in these languages is a lot easier than it sounds and although at first it may not be as seductive as "Wix" or "Square Space" you will find that for a little bit of extra work at the beginning you save a lot of work at the end.
The;
files for this web-page are specially created so as to be clear and so as to serve as the material from which we will start to learn.
We are going to take these three files and make changes to them and see the effects of those changes.
By changing the text and the image to be your own you will start to create your own web-page.
To start in these languages is a lot easier than it sounds and although at first it may not be as seductive as "Wix" or "Square Space" you will find that for a little bit of extra work at the beginning you save a lot of work at the end.
The HTML for this page is contained in a file called "index.html".
There is a second file calles "style.css" which determines the layout style of this page.
Both files are intended for you to look at and learn from. There is no Javascript for this page.
The internet its self existed before web-pages and was just a way for computers to be networked between organisations.
In 1980, physicist Tim Berners-Lee at CERN, proposed a digital document sharing system.
A system so that documents held on various computer systems "servers" could be read on various other computer systems "clients" using special programs called "browsers". In principle the servers and browsers could be anywhere in the world.
The first objective was that documents could be read on lots of different computer terminals or printed out on different format printers but still remain intelligible. This objective that HTML pages can be browsed on lots of different devices with different formats, remains with us today.
A second objecting was that references to other documents could be made within the text, and that these references could be simply followed to look at those other documents. These are the links that we normally click on to go to another web-page. The other document or web-page (the same thing really) could be served by the same computer or served by another computer somewhere else in the world. So one could form a web of linked documents, hence the name World Wide Web (WWW).
This ability for a document to link to link to another document was called "Hyper Text".
In order for the documents to be able to be browsed on many different systems they needed all to be written in a special "Mark-up Language", this is a language that in the old days of the printing press told the printer where to use headings and that sort of thing i.e. how to lay out the pages in the final print.
Hence the name "Hyper Text Mark-up Language" or just HTML.
In order for the server computers to communicate with the browsers on the client computers, Tim Berners-Lee defined a protocol called Hyper "Text Transfer Protocol" or HTTP.
Here is a link with more about Tim Berners-Lee. Back in the days of green screen terminals, the link would have had a number next to it but today you can just click on the link to go to the other web-page / HTML document.
Here is a link to one of the original WWW project pages at CERN.
You don't need to read the linked pages for this tutorial but they might just be interesting because they tell you about the history.
At that time there was no CSS there was only HTML. The idea of a choice of typefaces (fonts) was not considered because very few devices had more than one font.
In the early days even text styles like bold text, italic text and underlined text were luxuries most browsers did not have. Now these styles can be combined such as bold italic text or bold italic underline text or in any other way you want.
As I have said, a single HTML document is the same thing as a single HTML page or web-page and is a single HTML file on the computer.
A web-site consists of a number of web-pages and so a number of HTML files on the computer.
Every website has a "home page" which is always a file called "index.html". It is the opening page of the web-site. The index.html page originally was the index to what a site had to offer and that convention has remained.