3.7 - Web Authoring & Simple Website Design
Common features of websites
Websites often include more than just plain text to make them engaging and interactive for users. These features help visitors navigate, interact, and find information easily.
Key website features
- Navigation bar - A menu at the top or side of a page containing hyperlinks (clickable links) to other parts of the website, such as "Home" or "About Us".
- Animations - Moving images or graphics that add visual interest; some web design tools allow you to create these without coding.
- Forms - Interactive elements that collect user information, like name and email address, often used for sign-ups or feedback.
- Counters - Tools that track and display the number of visitors to a site; some count only unique visitors, ignoring repeats.
- Hotspots - Clickable areas on an image that act as hyperlinks; different parts of the same image can link to different web pages.
These features make websites more user-friendly and dynamic, helping to keep visitors engaged.
Types of software for creating websites
Creating a website involves structuring content and adding features, but you do not always need to write code from scratch. Special software simplifies the process. There are different ways to make a website: you can write your own code, or use software to handle the hard work for you.
WYSIWYG editors
WYSIWYG stands for "What You See Is What You Get". This type of software works like a word processor or desktop publishing tool.
How WYSIWYG editors work:
- You add text, images, and other elements directly onto a visual layout.
- The software automatically converts your design into HTML code behind the scenes.
- This is ideal for beginners as it requires no coding knowledge.
Text editors
Text editors allow you to write HTML code directly.
Types of text editors:
- Basic ones, like Notepad, can be used to write HTML directly.
- Advanced text editors function like an IDE (Integrated Development Environment) with features such as syntax highlighting (colour-coding code to make it easier to read) to help with coding.
The structure and basic elements of HTML
HTML provides the foundation for all web pages by defining their structure. It uses tags to organise content, and web browsers interpret this to display the page.
What is HTML?
HTML (HyperText Markup Language) is a markup language used to create the structure of web pages. It consists of elements, which are building blocks of content like headings or paragraphs.
Key HTML concepts:
- Tags - Labels that mark the start and end of an element, enclosed in angle brackets (e.g.,
<title>for the opening tag and</title>for the closing tag with a forward slash). - Elements - The complete unit including opening tag, content, and closing tag (e.g.,
<title>My Page</title>).
CSS (Cascading Style Sheets) is a separate language used alongside HTML to control the appearance, such as colours and fonts, for one or more pages.
Basic HTML document structure
Every HTML document follows a standard structure to ensure it displays correctly in a web browser. Here's an example of simple HTML code:
Key parts explained:
<!DOCTYPE html>- Declares the document as HTML; it does not need a closing tag and must be first.<html>and</html>- Enclose all the code for the web page.<head>and</head>- Contain meta-information like the page title, which does not appear on the page itself.<body>and</body>- Hold the visible content, such as text and images.<h1>to<h6>- Heading tags for titles;<h1>is the largest and most important, decreasing in size to<h6>.<p>and</p>- Paragraph tags to separate blocks of text.
When viewed in a browser, this code creates a page with a large heading, a paragraph, and a smaller subheading. Different browsers may display it slightly differently, but the structure remains consistent.
Formatting text and lists in HTML
Formatting helps make web pages more readable and visually appealing. HTML provides basic tags for this, while CSS handles more advanced styling.
Basic text formatting
Use these tags to style text within elements like paragraphs:
Text formatting tags:
- Italics -
<i>and</i>(e.g.,<i>important</i>displays as important). - Bold -
<b>and</b>(e.g.,<b>key point</b>displays as key point). - Underline -
<u>and</u>(e.g.,<u>link</u>displays as link).
Example code and output:
This renders as: He heard a loud noise from the dark forest.
For more options, like changing font colours or sizes, use CSS to apply styles across the entire site.
Creating lists
Lists break up text into organised points. HTML supports two types:
Unordered lists (bulleted):
Use <ul> and </ul> for the list, with <li> and </li> for each item.
Example:
This displays as:
- Apple
- Banana
- Cherry
- Date
Ordered lists (numbered):
Use <ol> and </ol>, with <li> for items.
Example:
This displays as:
- Step one
- Step two
- Step three
- Step four
Adding hyperlinks and images in HTML
Hyperlinks and images make websites interactive and visual, connecting pages or displaying graphics.
Hyperlinks
A hyperlink is clickable text or an image that leads to another page or site. Use the <a> tag with the href attribute (hypertext reference) to specify the destination.
Examples of hyperlinks:
- For a link to another page in the same folder:
<a href="nextpage.html">Proceed to next page</a>. - For an external website:
<a href="https://example.com">Visit example</a>.
The text between the tags is what users click. Files must be in the same folder for local links.
Images
Images are added with the <img> tag, which does not need a closing tag but requires attributes.
Required attributes for images:
src(source) - The file name or URL of the image (e.g.,src="photo.jpg").alt(alternative text) - A description for accessibility; screen readers use it for visually impaired users (e.g.,alt="A sunny beach").
Example:
This displays the image, or the alt text if the image fails to load.
The role of CSS in web design
CSS (Cascading Style Sheets) enhances HTML by controlling the visual style of web pages, making it easier to maintain a consistent look.
Benefits of CSS
- Consistency - Define styles (e.g., all headings in blue) in one CSS file that applies to multiple pages.
- Efficiency - Change the design of an entire website by editing a single file, like a template.
- Advanced formatting - Go beyond basic HTML tags to set fonts, colours, layouts, and more.
Web designers often use CSS to ensure sites look professional and uniform, saving time on large projects.