Creating HTML Webpages

Creating HTML Webpages

HTML, or Hypertext Markup Language is used to create the visual objects on a webpage. As part of the iGCSE you are expected to have some experience of using HTML in order to discus how web pages are created, however you are not tested specifically on your ability to create the code.

This smaller set of lessons will guide you through creating an example website using HTML. You can use any text editor to create your HTML, but in these examples we have used the free Brackets software.

HTML is a markup language rather than a coding language. This means that it tells the browser what your webpage should look like, but doesn’t have the functionality of a programming language.

HTML uses tags to identify each of the objects on the web page. Tags are identified using angle brackets around them. For example, a paragraph uses a <p>. Each tag within the HTML has a start and an end tag – these are identified with an opening tag such as <p> and the closing tag which uses a forward slash </p>. Anything in between these two tags is enclosed within it and given all of the properties of that tag; in this case, a paragraph.

DIV tags are a usefull way to develop the layout of a webpage, especially with users who may want to view your webpage on different devices with different screen sizes.

The hypertext parts of HTML refers to the fact that original web pages were purely made up of text that was sent throughout the Internet. Developing the text of your web page is one of the most important parts and his divided into headings and paragraphs, each with their own specific tag.

Since the early 2000s Adding images to web pages has made them more attractive and supported the text that is on the pages much like a printed document. Unlike a printed documents, the images that we can add to our web pages can also contain basic animations like gifs and are added in exactly the same way as text by using a specific tag for an image.

Most users of websites now expect the web pages that they visit to be interactive rather than just static text and images. Using buttons allows the web developer to add interactive elements to the web page.

However, adding interactivity often means including additional script language such as JavaScript as HTML alone would not allow a button press to perform an action. JavaScript is a programming language although it is embedded into the HTML of a web page. Sometimes, JavaScript is described as a client side scripting language because it is translated using an interpreter inside the web browser.  

Just like a printed document it is important to understand presentation on a web page. Adding additional styling elements such as alignment help the web developer to present the information on their web pages more clearly.  

One of the newer developments for web pages and HTML since the launch of HTML5 has been the ability to add animation without including any additional plugins or scripts. Including extra animation of objects on the web page and help to highlight important information. However, it is also important to remember not to overuse animation as the web page can become messy and distracting.  

Activity

Once you have created your webpage using the video tutorials above, upload your finished html file below for feedback from your tutor. If you have used extra files such as CSS or images, upload these as a zipped folder.

The Role of the ISP

The Role of the ISP

The internet is made up of a global network of LANs (Local Area Networks) all connected together using routers that allow data to travel between connected devices.

Imagine that you were travelling from Norwich to Nottingham by car. You would have to follow the network of roads between the two cities going via a number of other places on the way.

In the same way as driving between cities, data between two devices on the internet must travel usng the connected routes available, often bouncing between a number of routers before reaching their destination (although in reality this takes just a few seconds).

In order for the two devices to connect, a number of protocols are used. A protocol is a set of rules that governs data transmission and allows the devices to agree on how the data will be transferred. Usually, the data being requested over the internet is connected to a web page, like this one.

ISPs

An ISP or Internet service provider allows a unique user to connect to the Internet by providing a rental of their telecommunication lines. This allows the user to access the Internet either through copper cables, or for faster broadband fibre optic. Mobile ISPs also provide Internet access to our mobile digital devices through the 4G network and now also the 5G network. For mobile devices the G stands for generation with each subsequent generation being faster than the previous one as more bandwidth is provided.

As there are all many different ISPs across the world they all need to communicate with each other as data packets need to be sent globally no matter which ISP the web server belongs to. They do this by connecting using routers which form The Internet.  

The Internet Vs. The WWW

It is important to remember that there is a difference between the Internet and the worldwide web. The Internet was developed many years ago as a way to connect devices together and is the hardware making up a web of interconnected networks which can all talk to each other and share data. The worldwide web is the software that sits on Top of the Internet and allows us to communicate using the HTTP protocol for web pages and their related data. The worldwide web is actually much younger than the Internet and turned 30 years old in 2019. Watch the video below for more information about the history of how the worldwide web came about.

Domain Name System (DNS)

Once a website has been loaded onto the webserver, the users need a way to access the website. They do this using a URL (Uniform Resource Locator).

The sites DNS is a database of all registered URLs which matches them to the IP of the webserver.

Different parts of a site may point to different servers. For example, the website may be stored in one location, email on another, and a database on another. Using the DNS, the same URL can be used for each because of the protocol used.

Activity

Use the online visual Trace Route tool to track how a data packet is transferred between different routers in order to get to it’s destination. Can you tell by looking at the output when the ISP changes?