dipwebdev_ictweb516_12slides_ch03
TRANSCRIPT
ICTWEB516RESEARCH & APPLY EMERGING WEB TECHNOLOGY TRENDS
LESSON THREE OVERVIEW
Building Web Pages
1. Planning a website
2. Web page basics
PLANNING A WEBSITE
• Technology & design not only factors dictating website success –
human element must also be considered
• People usually access the web for information. They must be able
to access that information quickly
• Structure of website vitally important. Unlike a book the web is
hierarchical - almost 3 dimensional in the way people can navigate
• Develop a site map to show structure of planned site
PLANNING A WEBSITE CONT.
• Obtain feedback on site map layout from clients, customers,
technical and non-technical people
• Next step is to design layout – work on paper first
• Successful website have common theme and consistency so that
customers can feel “safe”
• Ensure you provide a method for customer/visitor to make contact
with site owner
PLANNING A WEBSITE CONT.
Usability checklist:
• Does the site convey its main purpose?
• Is the site easy to navigate?
• Is it easy for users to locate content on each page?
• Is it easy for users to find what they need on the site?
• Are download times kept to a minimum?
• Is the site suitable and relevant for its target audience?
• Does the site use familiar website conventions?
WEB PAGE BASICS• Typical HTML5 document sections
<!DOCTYPE html >
<html lang="en">
<head>
<title></title>
<meta charset=”utf-8" />
</head>
<body>
</body>
</html>
WEB PAGE BASICS CONT.• DOCTYPE declaration tells the browser how to display the HTML
• HEAD section where all metadata content that sets up the presentation or
behaviour of the rest of the content or links the document with other documents
• Page Title is displayed in browser tab and important for SEO
• Meta tags
• keywords
• description
• author
• Attaching external documents
• External CSS file
• <link rel="stylesheet" href="scripts/my_stylesheet.css" />
• External JavaScript file
• <script src="scripts/javascriptfile.js"></script>
WEB PAGE BASICS CONT.
• The BODY section contains the documents content. A HTML document should
only ever have one head and one body section.
• File name conventions
• File names should only contain letters, digits, underscores and dashes
• File names should be lowercase
• Naming files in lowercase and replacing spaces with hyphens (dashes)
works well
• HTML comments
<!-- this is a comment in HTML -->
• CSS comments
/* This is a comment in CSS and also in JavaScript */
• JavaScript comments
// This is a single-line JavaScript comment.
8
LESSON FOUR OUTLINE
Type and Images
1. Type
2. Colour
3. Image types
4. Image mistakes to avoid
5. Optimizing images for the web
ANY QUESTIONS