Intro to Web Design

Sean Preston
Welcome!
• My name is Sean Preston

• I’m Head of Technology, Senior Lecturer in Computing and Course

Leader for BSc (Hons) Computing.

• I was a Web Developer in industry for over 10 years.

• I have developed websites for many sectors including news,

automotive, banking, education, travel and ecommerce.
What you’ll learn today…
1. You will understand what is required from you during the module.

2. You will gain a deeper understanding of the World Wide Web and
the roles within the industry.

3. You will be introduced to the HTML skeleton.

4. You will begin to utilise HTML5 elements.

This Module
Welcome to Intro to Web Design
• Each class of this module will last 3-hours.

• Most sessions will include multiple activities. These activities

progressively build a single project. So, you must not skip any!

• Together as a class we will create an online news website. You should

be able to add this to your portfolio.

• Independently, you will create a TV search website for your

assignment.
How does this fit in with my course?
• Level 4 – Introduction to Web Design
• Level 5 (Semester 1) – Advanced Web Design
• Level 5 (Semester 2) – Advanced Web Application Development

• Students who complete the above and the L6 Programming for

Mobile module will receive a specialist BSc (Hons) Computing (Web
and Mobile Development) award.
4 Rules for success
Rule 1: Time management
• Students that fail this module, fail because they
have not managed their time.

• Don’t leave your assessment(s) until the final week

before submission because:

A) You wont be able to get feedback on your work

B) You wont have enough time to get a good grade

• Your tutors are here to support you, but only if

you’re willing to put the time in also!
Rule 2: Respect
• There should be mutual respect between each
other as students and between you and your
tutors.

• “Have Heart” - A Japanese term that roughly

means “challenge with love.” Provide feedback to
each other but don’t offend.

• People are at different points in their career and

life. Be patient and help others!
Rule 3: Proactiveness
• To make the most of your time here at university, you need
to be proactive in your learning.

• Saying “yes” to opportunities that arise assuming they

wont distract you from your studies.

• Be involved, be creative and further your career. Go

beyond your lessons and create projects for your portfolio.

• Attempt to fix issues yourself before contacting the tutor –

You learn much better this way!
Rule 4: Communication
• Things happen – We can prevent them from
affecting your studies through communication.

• You should contact me and your PAC if you

experience:
• Feel you’re falling behind in your work
• A concern for your mental wellbeing
• A family emergency or long-term sickness

• The impact these issues have on your studies can be

mitigated through the University’s Extenuating
Circumstances policy…but, only if you communicate!
4 Rules for success: Conclusion
• Complete these four rules and you’ll:

• Have a more enjoyable experience at university

• Achieve higher grades in your assessments

• Keep your studies on track

• Learn lifelong skills that will benefit your future

career
Assessments
• This module features one assessment:

1. Final TV Search Website and Report – 100%

Assessment 1 – TV Search API
• For this assessment you are required to create a small website similar to
IMDB allowing users to search for TV shows and artists.

• You should use the techniques you have learnt during the in-class
activities to complete this assessment.

• As part of this submission you are required to complete a report.

• The grade for this assessment is worth 100% and you have 2,000 words
for the report component.
Assessment templates!!!!!
• You will find an assessment template for assignment two for this
module. YOU MUST USE IT!

• Please download it from Brightspace before your begin the

assessment.

• For all reports on web and mobile modules, a template will be

provided.
Assessment Rules
1. No web templates (free or premium). E.g. don’t go and download a
template and use it as your design!

2. The use of front-end frameworks (such as Bootstrap) is allowed and

encouraged!

3. The use of JavaScript libraries is allowed and encouraged!

Some of the technologies you will
learn…
 What is the
World Wide Web?
The Internet and the Web
• The Internet is a network of connected computers with many
protocols available to transfer information – email, ftp, etc.

• World Wide Web is the linkage of documents using hypertext links

(and hence hypertext transfer protocol and HyperText Markup
Language - HTML).

• The World Wide Web was invented by English scientist Tim Berners-
Lee in 1989 while working for CERN.
Web 2.0 and Web 3.0
• Web 1.0 was a web of documents, of static pages, of few publishes
and many consumers.

• Web 2.0 is a web of dynamic pages, rich media applications, web-

oriented architecture, mass participation in content creation and
social media. This is where the web as we know it began!

• Web 3.0 is the Semantic Web – where automated agents can access
the web intelligently through understanding the meaning of content,
etc., and achieved through meta-data
Browser and Servers
• Servers are computers which host the files and data required to
present websites (These are normally in the form of Web Hosting).

• Browsers allow users to navigate the world wide web using a GUI.
While headless browsers exist they are uncommon for the general
consumer.

• Most common browsers are Google Chrome, Firefox, Safari and Edge.
Other browser such as Opera exist, but their usage is minimal in
comparison.
Domain Names
• A Domain Name is a user-friendly means of allowing users to access
content on the World Wide Web.

• Without domain names a user would need to enter the IP address of

the web server to gain access to the content.

• A domain includes a name and extension. Often the extension

represents either the type of website or the country in which the
content is targeted towards.
Domain Names Cont
• Some domain names are open to all (e.g. .com, .net, .co.uk etc).

• Some domains are restricted to residents of the country (e.g. .fr)

• Some domains are restricted to government agencies or education

institutions (e.g. .gov, .gov.uk, .edu, .ac.uk).

• Sometimes a domain extension isn’t used as intended. For example the

domain extension .io is often used for tech companies. However, it’s
also the official domain extension for the British Indian Ocean Territory.
Web Server Software
• Most servers worldwide run on either Apache, Internet Information
Services (IIS) or Nginx.

• Many commercial hosting providers will give website administrations

access to control panels such as cPanel, WHM and Plesk.

• A web server can be installed on your local machine or be installed on

a web server. In most cases content uploaded to a local web server
should not be accessible by the public and should be used only for
development purposes.
Web Development IDEs and Text Editors
• Text Editors allow for the rapid development of websites. They can
take a basic form such as Notepad++ or something more featureful
such as Atom, Sublime Text or Visual Studio Code.

• An IDE is a fully-fledged development environment. They’re much

larger in size and offer a wider range of features.

• Today, most developers choose to develop using text editors. The

most common being Atom, Sublime Text and Visual Studio Code.
Roles within the Web
industry
Web Designer
• A web designer is responsible for the user interface (UI) of the
website and it’s design.

• Most commonly web designers won’t code any HTML, CSS or

JavaScript. However, they’re expected to understand the
fundamentals of these technologies.

• Web Designers will primarily work with software such as Photoshop,

Adobe XD or Sketch.
Back-end Developer / Server-side
Developer
• A Back-end developer is responsible for most of the logic and the
accessing/interpretation of data from a source (e.g. a MySQL
database).

• Back-end developers will normally focus the majority of their

knowledge on a single server-side language such as PHP, Perl or .NET.

• It’s expected that back-end developers also have some understanding

of HTML, CSS and JavaScript. However, this knowledge won’t be as
significant as front-end developers.
Front-end Developer
• Front-end developers are responsible for any front-end technologies.
These include:
• HTML
• CSS
• JavaScript

• It is unusual for a front-end developer to have to interact with server-

side code (such as PHP, Perl or .NET).
Full-stack Developer
• A full-stack developer is a combination of the front-end and back-end
developer roles.

• A full-stack developer should be able to use:

• HTML
• CSS
• JavaScript
• A server-side language such as PHP, Perl or .NET

• Many freelancers are full-stack developers. You’ll be taught to be a full-

stack developer as part of this course.
Really, it depends where you work…
• Most Web Agencies tend to have less precise job roles. Whereas a
company developing in-house software is likely to have more specific
roles.

• You will normally find yourself falling into one of these roles as you
develop as an expert in the field. For example, if you find yourself
enjoying CSS and JS then it’s probably likely you’ll be a front-end
developer.
Then there’s JavaScript…
• JavaScript confuses the matter further as many websites now make
use of advanced JavaScript frameworks which require the skills
commonly associated with a back-end developer.

• JavaScript can also be used as a back-end technology in the form of

NodeJS. Therefore, you can technically develop everything in
JavaScript!
HTML
Introduction to HTML
• HTML stands for “Hypertext Markup Language”.

• Web browsers receive HTML documents from a web server. The HTML
markup describes the structure of a web page semantically.

• The HTML syntax includes a range of tags. These tags are often
treated differently by the web browser and can be used to describe
the content of “blocks” on the page.

• For example, an <img> tag is used to represent an image.

HTML Tags and Structure
• HTML tags are almost always split into opening and closing tags.
Within these two tags you would add the content. For example…

<div> Hello world </div>

• Some HTML elements are self closing. For example…

<img src=“img.jpg”/>

• HTML Tags can be nested

HTML Skeleton
<!DOCTYPE html> Document type definition
<html>
Root HTML tag
<head>
<meta charset="utf-8"> Head tag
<title></title> Character set to use
</head> Document title
<body>
<p>Hello, world!</p> Document body
</body>
Paragraph element
</html>
HTML Attributes
• HTML elements can have attributes.

• Attributes provide extra information about an element.

• Attributes are always set in the opening tag.

• They follow a name/value format.

• Use double quotes. <p width=“100”>Hello World</p>

HTML Elements - Paragraph
<p>Text goes here</p>

• Block element

• May contain text, images and other inline elements.

• Should not contain headings, lists etc (block elements)

HTML Elements - Headings
<h1>Text goes here</h1>

• Block element

• H1 is top level and the largest font size, H6 is the bottom level and
smallest font size.

• Each page on a website should only have one H1 tag (for SEO
purposes)
HTML Elements - Lists
<ul>
<li>Text goes here</li>
</ul>

• Unordered lists (UL) are used for a collection of items that appear in
no particular order.

• Ordered lists (OL) are used for lists where the sequence is important
(e.g. tutorial steps)
More inline elements
Tag Description
<a href=“”> … </a> Link
<br/> Page break
<code> … </code> Computer code sample
<em> … </em> Emphasised text
<u> … </u> Underlined text
<i> … </i> Italic
<b> … </b> Bold
<strong> … </strong> Bold – for emphasis
<small> … </small> Small print
Class Project
Introduction to class project
• In each class you will be given activities which together form a complete
website.

• The website you will be creating is a news website.

• While the activities should provide you with a basic structure. It is expected
that you’ll go beyond these.

• You are expected to complete all these activities. Additional support for
content covered in activities won’t be provided for those who don’t complete
the activities!
Which editors/IDEs should you be using?
• I don’t really mind which editor you use. You should however not be
using Dreamweaver!

• Instead, choose from one of the following:

• Visual Studio Code
• Atom
• Brackets
• Sublime Text
HTML5 Elements
Introduction to HTML5
• HTML5 is the latest evolution of the standard that defines HTML.

• The standards can be represented in two parts:

1. A range of new elements, attributes and behaviours.
2. A larger set of technologies.

• We’ll now go through some of the updates included in HTML5…

Semantics
• One of the major improvements in HTML5 was the introduction of
further “semantic elements”.

• Semantic elements are HTML elements where the name of the

element explains it’s content.

• They include:
• <header>, <footer>, <aside>, <nav>
• <audio>, <video>, <picture>
• <progress>, <time>, <date>, <address>, <figure>
Offline and storage
• Additional support for file uploads (allowing multiple files to be
uploaded in a <input type=“file”> element.

• IndexedDB – A storage method, however, rarely used.

• Local storage and WebSQL

Multimedia
• Using the devices camera API to manipulate and store an image from
a camera.

• WebRTC – Allowing Real-time communication in the browser (e.g.

video conferencing)

• New <video>, <audio> and <picture> elements.

3D Graphics and Effects
• HTML5 Canvas – Drawing, games etc

• WebGL – 3D graphics in the browser.

• SVGs – XML-based format of vectoral images.

Performance and Integration
• Improvements to Ajax (XMLHttpRequest level 2).

• Manipulate browser history (History API).

• ContentEditable attribute!

• Drag and drop

Device access
• Touch events

• Geolocation

• Detecting device orientation

 Once you have
completed the activities
in a lesson you should
work on your assignment

Activities