Information Technology • Website Authoring

Web Authoring Studio

Web Authoring Studio — Explanation

How to use it. In Tasks, the page you're building (Harbour Kayaks, a kayak hire firm on Auckland's Waitematā Harbour) is index.html, and its attached stylesheet is styles.css. Edit either one and the preview updates as you type. Each task is checked automatically by looking at the preview itself: what's in it and how it's styled. Choose Target above the preview to see what you're aiming for. The other views explain the three layers, paths and links, and the cascade.

The three layers of a web page.

Keeping them separate means one stylesheet can give a whole website the same house style, and changing the stylesheet restyles every page.

The head and the body. The head holds information about the page: its <title> (shown in the browser tab, not on the page), the attached stylesheets (<link rel="stylesheet" href="styles.css">), and meta tags (charset, description, keywords, author, viewport). Everything shown on the page goes in the body.

Paths. A relative path (images/kayak.png, ../contact.html) is worked out from the folder the page is in, so it still works when the whole website is uploaded to a web server. An absolute path gives the full location: an absolute file path (C:\Users\Aroha\…) only exists on one computer, so don't use one in a website. An absolute URL (https://…) is right for linking to another website.

Hyperlinks. A link to a bookmark (an anchor) on the same page uses # and the element's id: <a href="#prices"> goes to <h2 id="prices">. target="_blank" opens a link in a new tab or window; mailto: opens an email to that address. An image inside <a> becomes a link.

The cascade. Styles can be attached (an external stylesheet), embedded (a <style> element in the head) or inline (a style attribute on one element). When they disagree, inline wins, then embedded, then attached. (Strictly, between the attached and embedded styles the later one wins, which is why the stylesheet is attached first. With several attached stylesheets, the last one attached wins.) A class (.warning) can be used by many elements; an id (#footer) must be unique on the page.

Common exam mistakes: putting the title in the body; forgetting the generic font family (Verdana, sans-serif); confusing points and pixels (24pt is 32px); using an absolute file path to an image on your own computer; leaving out the # in a bookmark link, or a capital letter that doesn't match the id; forgetting mailto:; changing only the width of an image so it's distorted; using the same id twice where a class is needed; empty or useless alt text ("image").

Objective: Cambridge IGCSE ICT (0417), section 21, website authoring: the web development layers, creating content (head, body, tables, images, hyperlinks, bookmarks), relative and absolute file paths, and the presentation layer (attached, embedded and inline styles, their hierarchy, classes and ids).

Where this fits

  • Cambridge: Cambridge IGCSE Information and Communication Technology (0417)
  • NCEA Level 1 Digital Technologies: 92005 Develop a digital technologies outcome
  • NCEA Level 2 Digital Technologies: 91893 Use advanced techniques to develop a digital media outcome
  • Pearson Edexcel International: Edexcel International GCSE ICT (4IT1); Edexcel International A Level Information Technology Goes beyond Edexcel International GCSE ICT (4IT1): Stylesheets and the cascade go beyond 4IT1, which uses HTML only for links, images and font enhancements.

Web Authoring Studio — Key Terms

Key concepts in English, with te reo Māori, Chinese (Simplified) and Korean.

EnglishTe reo Māori中文（简体）한국어What it means on this page
HTMLno attested term超文本标记语言（HTML）HTML(하이퍼텍스트 마크업 언어)HyperText Markup Language: the code that marks up a web page's content and structure, such as headings, paragraphs, tables, images and links.
CSSno attested term层叠样式表（CSS）CSS(캐스케이딩 스타일 시트)Cascading Style Sheets: the rules that set how a web page looks, such as its fonts, colours, borders, spacing and alignment.
Content Layerno attested term内容层콘텐츠 계층The HTML of a web page: its text, images, tables and links, and their structure.
Presentation Layerno attested term表现层표현 계층The CSS of a web page: how its content looks.
Behaviour Layerno attested term行为层동작 계층The scripts (JavaScript) of a web page: what happens when the user does something.
Stylesheetno attested term样式表스타일시트A file of CSS rules attached to web pages with a link element, so a whole website shares one house style.
Inline Styleno attested term内联样式인라인 스타일A style attribute on one element. It overrides embedded and attached styles.
CSS Classno attested termCSS 类CSS 클래스A named style, such as .warning, that any number of elements can use with class="warning". (An id, #footer, is for one element only.)
Hyperlinkno attested term超链接하이퍼링크Text or an image that, when clicked, opens another page or file, a place on the same page, or a new email.
Relative File Pathno attested term相对路径상대 경로A path worked out from the folder of the current page, such as images/logo.png or ../index.html. It still works when the whole site is moved.
Absolute File Pathno attested term绝对路径절대 경로A complete location: a drive and folders (C:Users…), which only works on that computer, or a full URL (https://…).
Bookmarkno attested term书签（锚点）북마크(앵커)A place on a page (an element with an id) that a link can jump to, with # and the id: href="#prices".
Alt Textno attested term替代文本대체 텍스트Text in an image's alt attribute that describes it, read aloud by screen readers and shown if the image can't load.

On the te reo Māori column. Terms marked as gaps have no attested equivalent in the sources checked — Karaitiana Taiuru's Dictionary of Māori Computer and Social Media Terms, Paekupu, the Reserve Bank's te reo financial glossary, NZQA and Te Aka. No coinage is printed as though it were established; where a class needs one, commission it from Te Taura Whiri i te Reo Māori and credit the translator. Te reo Māori is not italicised and takes no plural "s".