Issues and Implications of Web Coding
What is a Web Browser?
A web browser is a piece of software that is used to convert the HTML content of web pages into a format viewable by users.
Examples of web browsers include Internet Explorer, Chrome, Edge and many more.
With increasing standardisation, browsers now attempt to differentiate through the use of:
- Additional usability features
- Integration with other services
- Focus on javascript performance
Markup Language
A markup language is used to describe where on a page information should appear. It is not a programming language, as you are not issuing instructions for processing.
The most commonly used markup language is HTML – HyperText Markup Language. This began as a method of describing simple web pages with text and images in the early days of the Internet, and has evolved over the past 20 or so years into something far more capable and complex.
HTML defines a set of tags which are used to explain to the Web Browser how the information should be presented to the user, and the ways in which they can interact with it – some examples will be given in the next section.
As noted, early versions of HTML were very limited in terms of what they could do. This lead to ‘browser wars’. Rival manufacturers developed bespoke extensions for their browsers that would add unique features. For example, Microsoft added a technology called ‘ActiveX’ to Internet Explorer. This allowed plug-ins to run within the browser and provide features that no-one else’s browser could show.
The down-side to this innovation was that websites had to be encoded in multiple forms to cater to different browsers, and users often needed to use different browsers for different websites.
A universal plugin called ‘Flash player’ was created to bypass this problem. If a website was written to take advantage of the Flash Player, and this plugin was available for all browsers, suddenly it became possible to not only have a single version of a website that worked properly across multiple browsers, but also it was possible to add interactivity and features that weren’t possible without it – for example, animations and browser-based games.
HTML5
HTML5 is an attempt to standardise HTML and features across browsers, and to replace the functionality that once required plugins such as Flash with built-in functions.
If a website is HTML5 compliant, it should work correctly and consistently across any HTML5 compliant browser.
In order to be a valid HTML5 document, it should follow these (standard HTML) rules:
- All content should be contained within tags; these tags almost always have matching opening and closing tags, and are nested.
- Tags are lowercase
- Do not use made-up, custom tags
An example of an HTML page follows:
<html>
<head>
<title>Page setup and headings in this section</title>
<link rel="stylesheet" href="style1.css">
</head>
<body>
<p>
In the body, we place all content that is going to appear
</p>
<p>
Note that the tags are nested; this p will close before body
</p>
</body>
</html>
<!-- Note also that a style-sheet has been referenced/linked in the
heading of this page
HTML comments use <!-- and -->
-->
You should be familiar with the use of, and purpose of the following tags:
| Tag | Use | Purpose |
| p | <p> … </p> | Denotes that the contents will be displayed as, and treated as, a paragraph |
| br | <br /> | One of the few tags without a separate closing tag. Line break. |
| img | <img src=”image.jpg” /> | The other common tag without a separate closing tag. Inserts an image which is located at ‘src’ |
| h1, h2, h3, h4, h5 | <h1>Heading</h1> | Format text as, and behave as, headings. h1 is the largest, with h5 the smallest |
| li | <li>Item</li> | A list item; used in ordered and unordered lists. |
| ol | <ol> <li>item 1</li> </ol> | Creates an ordered list, containing the list items within it. An ordered list shows the items with numbers: 1, 2, 3 etc |
| ul | <ul> <li>item 1</li> </ul> | Creates an unordered list, containing the list items within it. An unordered list displays as bullet points |
| a | <a href=’google.com’>Click here</a> | Creates an anchor tag. An anchor is a link – the property in href dictates where the link will go, and the value between the opening and closing tag is what is displayed to the user |
CSS
CSS stands for Cascading Style Sheet. A CSS file is a text file that contains a list of styles that should be applied to the rendering of a page.
In the early days of web design, a web designer would style elements of the page as they wrote the HTML:
<p backgroundcolor = "red" color="blue"> Hello </p>
However, this has drawbacks:
- The formatting must be applied every time the designer would like a paragraph to have blue text on a red background
- It is mixing up the formatting with the content – in this case the content is a paragraph containing the word ‘Hello’; all of the remainder is formatting
CSS allows these two things (content and design) to be separated out into two different files – one CSS file containing the formatting, and an HTML file that contains the content. It also means that styles used once can be reused easily elsewhere.
Advantages to this approach include:
- Separation of design from content allows different people to work on each
- Styles can be defined once and re-used
- Pages can easily be redesigned simply by altering the CSS file
CSS styles can be declared in three ways, depending on what the desired effect is.
Class selector
Defining a style with a name that begins with a period ( ‘.’ ) creates a class. This style can be applied to any element in a page by adding ‘class = Classname’ to the HTML:
<!-- CSS -->
.myStyle {
color:white;
font-size:12pt;
background-color:red;
}
<!-- HTML -->
<p class="myStyle">Red background and white, 12pt text</p>
<h1 class="myStyle">This heading will look the same</h1>
Note that when the class is used within HTML, you do not include the leading period in its name.
ID selector
Elements on a web page can be assigned a unique ID – no two elements on a page can have the same ID. A CSS rule can be created that only applies to an element with a specific ID – this is used widely in items such as navigation bars, where each item will have a unique ID that the developer uses to track which item has been clicked or currently selected.
Styles defined with a pound sign (#) are treated as ID selectors:
<!-- CSS -->
#mainItem { color: green; }
#secondItem { color: red; }
<!-- HTML -->
<p id="mainItem">This will be green</p>
<p id="secondItem">This will be red</p>
Element
Finally, styles can be applied to all elements of a given type, by using the element tag as the CSS rule-name. This is a great way to ensure consistency in a page. For example, if you want to apply default formatting to every paragraph on a page, you could do the following:
<!-- CSS -->
p {
color: yellow;
font-size: 14px;
margin-left: 10pt;
}
<!-- HTML -->
<p>This will be yellow, 14px and indented by 10pt</p>
<p>This will also be formatted like that</p>
<h1>This will look like a normal h1 heading</h1>