Web Authoring Basics
FoundationWeb pages are written in HTML, where paired tags mark headings, paragraphs, lists and hyperlinks; they can be built with a plain text editor or a WYSIWYG editor, then uploaded to a web server for publication.
- A web page is an HTML file; the browser interprets its tags and renders the layout.
- Tags come in pairs, and attributes inside a start tag carry extra information.
- Common tags each have a role: h for headings, p for paragraphs, ul with li for lists, a for hyperlinks, img for images.
文體小知識：科技知識說明文——介紹網頁的超文本標示語言結構與常用標籤，並說明網頁由編寫、測試到發布的流程。
§Text Passage
1A web page is a file written in the Hypertext Markup Language (HTML). After the browser fetches the HTML file, it interprets the tags inside and renders headings, paragraphs, images and links into the layout users see. Related pages linked together form a website, whose first page is usually called the home page.
2The basic unit of HTML is the tag: a start tag and an end tag appear as a pair enclosing the content, for example wrapping a paragraph of text in a p tag. Tags can also carry attributes that supply extra information, such as the destination address of a hyperlink. Tags nest layer upon layer to build up the whole page structure.
3Common tags each have a duty: heading tags come in six levels of importance; paragraph tags divide text; list tags build bulleted or numbered lists; the hyperlink tag points to its destination through an attribute so pages can jump to one another; the image tag names the picture source and alternative text through attributes.
4There are two routes to authoring: a plain text editor, where tags are typed directly — thorough understanding and lean files, though harder for beginners; or a WYSIWYG editor, which generates HTML automatically while the author lays out visually — easy to start, but the files produced are sometimes bloated and the underlying principles can stay hidden.
5A finished page goes through saving, testing and publishing: store it with an htm or html extension; test the layout and links by opening it in a local browser; finally upload the files to a web server with file transfer software so the world can browse them by web address, and keep checking links and content after publication.
1Summary 重點摘要
Web pages are written in HTML, where paired tags mark headings, paragraphs, lists and hyperlinks; they can be built with a plain text editor or a WYSIWYG editor, then uploaded to a web server for publication.
2Vocabulary cards Vocabulary
The language that marks up web page content and structure with tags; the foundation of web authoring.
A markup token naming the nature of content in HTML, appearing as a start and end pair, e.g. heading and paragraph tags.
Extra information written inside a start tag, e.g. a hyperlink's destination address or an image's source file.
A link jumping between pages or to a spot within a page, set by the link tag with its destination attribute.
Software that fetches pages from servers and renders HTML into the layout users view.
The entry page of a website, usually carrying an introduction and links to the other pages.
An authoring tool whose editing view matches the final page, generating HTML automatically as the author lays out.
A tool handling plain text only, letting the author type HTML tags directly for lean, controllable files.
Descriptive text shown when an image fails to load and read by screen readers, set in the image tag's attribute — part of accessible design.
The process of sending local files to a server; finished pages must be uploaded to a web server before publication.
3Step by step Steps
- Step 1: How a web page worksA web page is essentially a text file containing tags and text written in HTML. After a web address is entered, the browser requests the HTML file from the web server and renders headings, paragraphs, images and links into a layout according to the tags; pages joined by hyperlinks form a website. For example, opening the same file in a text editor shows the raw tags while a browser shows the finished layout — proof that tags are instructions for the browser to interpret.
- Step 2: The structure of tags and attributesHTML tags come in pairs: the start tag and the end tag, distinguished by a slash, enclose the content, as a paragraph tag wraps a passage. Inside a start tag, attributes may be written as name-value pairs providing extra information, commonly a hyperlink's destination or an image's source. The page skeleton is built from three layers of tags — html, head and body: the head holds metadata such as the page title, while the body holds what users see. For example, forgetting an end tag can make the browser treat later content as part of that tag, breaking the layout.
- Step 3: Tags for text and listsText content has dedicated tags: heading tags run from level one to six by importance, level one being the largest; paragraph tags divide passages; bold and italic tags add emphasis. Lists come in two kinds: a bulleted list wraps the whole list in a ul tag with each item in an li tag, while a numbered list uses an ol tag with the same per-item li tags. For example, on an activity page the event name takes a level-one heading, the introduction a paragraph, notes a bulleted list, and procedural steps a numbered list for clarity.
- Step 4: Hyperlink and image tagsA hyperlink is created with an a tag whose href attribute carries the destination address or file, and the text between the tags is what users click; the target may be an external link to another site or an internal link to another page of the same site. An image is inserted with an img tag: the src attribute names the picture file, and the alt attribute supplies alternative text shown when the image fails to load and read aloud by screen readers. For example, a link labelled school calendar points to calendar.html, while the school badge image carries the alternative text school badge.
- Step 5: Text editor versus WYSIWYG editorAuthoring tools come in two kinds. A plain text editor requires typing tags directly; the benefits are thorough command of HTML, lean files and controllable edits, ideal for examinations and professional work. A WYSIWYG editor lets the author drag and drop content as in desktop publishing while HTML is generated automatically — easy and efficient, but the files can be bloated and long-term reliance hides the underlying syntax. For example, DSE questions ask candidates to write tags by hand, which a WYSIWYG tool cannot do, so learners should start with a plain text editor.
- Step 6: From writing to testingAfter writing, save the file with an htm or html extension and test it in a local browser: check that headings and paragraphs render correctly, lists align, hyperlinks jump to the right targets and images display; since browsers differ slightly in rendering, verify with at least two of them. Fix any problems in the editor, save and test again, cycling until satisfied. For example, a link working on the author's computer but failing after upload usually means a path case mismatch or a file that was never uploaded together.
- Step 7: Publishing and page qualityOnce tested, publish: use file transfer software to upload the pages together with their images and style files to a web server; only then can the world browse them by web address, and updates require re-uploading. Quality matters before and after publication: accurate content, clear layout, working links, alternative text on images for accessibility, and authorisation before quoting others' text or pictures to respect intellectual property. For example, a page kept only on a local machine cannot be reached by any address — proof that uploading is the key step of publication.
5Worked example Example
Application task: the student union wants an activity sign-up page containing the browser title text 'Club Activity Day', a level-one heading 'Club Activity Day', one paragraph of introduction, a bulleted list of two activities, and a hyperlink labelled 'Sign up now' leading to the form signup.html. Write the complete HTML fragment.
- Set up the skeleton: wrap the whole page in html tags, divided into head and body; inside head, use the title tag to set the browser title text 'Club Activity Day'.
- Add heading and paragraph: inside body, write the level-one heading with h1 tags and wrap the introduction in p tags.
- Build the list: create the bulleted list with ul tags, placing each of the two activities in its own li tag.
- Add the hyperlink: create the link with an a tag, set the href attribute to signup.html, and place the link text 'Sign up now' between the tags.
- Answer: Complete fragment: <html><head><title>Club Activity Day</title></head><body><h1>Club Activity Day</h1><p>All students welcome; admission free.</p><ul><li>Morning: programming workshop</li><li>Afternoon: robot demonstration</li></ul><a href='signup.html'>Sign up now</a></body></html>. Key points: title sits in head and drives the title bar; h1 and p render content in body; ul with li builds the bulleted list; the a tag points to the sign-up form through its href attribute.
6Common mistakes Mistakes
7Quick check Quick check
Q1What does HTML stand for, and what is its purpose?
Q2Which tag creates a hyperlink, and which attribute holds the destination?
Q3What is the purpose of the alt attribute of the img tag?
Q4What are the respective advantages of a plain text editor and a WYSIWYG editor?
Q5After testing, which step is needed before others can browse the page by web address?
8Recap Recap
- A web page is an HTML file; the browser interprets its tags and renders the layout.
- Tags come in pairs, and attributes inside a start tag carry extra information.
- Common tags each have a role: h for headings, p for paragraphs, ul with li for lists, a for hyperlinks, img for images.
- Plain text editors build the basics, WYSIWYG editors give speed; examinations require writing tags by hand.
- Publishing in three steps: save as html, test locally, upload to a web server — minding accessibility and copyright.