Building Web Pages: Editors, HTML and CSS Design Elements

Topic: Y2-3 Web page editors and design elements

How web pages are actually written and styled, explained step by step: HTML, CSS and JavaScript (Year 1); why web development matters, static vs dynamic websites, text editors, HTML structure and tags, links, images, lists, tables, CSS (inline, internal, external), video and audio, responsive design and accessibility; code editors such as VS Code and styling a product page.

View resource Free to join

What's inside

Every web page you visit is really a text file full of instructions. Your browser reads them and draws the page. To write those instructions you need only a text editor and a browser. This note shows how pages are built with HTML and styled with CSS, the design elements that make them attractive and easy to use, and the editors used to write them.

SUMMARIZED NOTES

Year 1: An overview of HTML (structure), CSS (style) and JavaScript (interactivity), and the components of a web page.
Year 2: Why web development matters, static and dynamic websites, HTML structure and common tags, CSS and its three methods, video and audio, responsive design and accessibility.
Year 3: Using a code editor such as Visual Studio Code to build and style a simple product page.

Year 1: The three languages of the web

Year 1 introduced the three front-end technologies. HTML is the skeleton, giving structure and content with tags. CSS is the styling: colours, fonts and layout. JavaScript adds interactivity. A simple website keeps these in separate files, for example index.html (the home page; "index" is the usual name), css/style.css and js/script.js, with images in their own folder. A plain text editor such as Notepad is enough to create them.

Year 2: Writing HTML and CSS

Why web development matters

Websites give access to information and services (the GES website for learners, teachers and parents), a business presence (Jumia and Melcom online reach customers beyond their shops), communication through blogs and forums (GhanaWeb), education (WAEC's results checker), and e-commerce (shopping with home delivery).

Static and dynamic websites

A static website is like a printed poster: the content is the same for everyone and only changes when the developer edits it. Static sites are easier, faster and cheaper to build and host, and suit small sites such as a portfolio or a small shop's information page. A dynamic website is like a conversation: its content changes with what you do, the time, or other factors. It is built with server-side technologies (PHP, ASP.NET, Node.js) and databases, is more interactive, and can handle huge amounts of frequently updated data. Jiji Ghana and Jumia, whose listings and recommendations change with your searches, are dynamic. Databases store a dynamic site's data (products, prices, orders) and the website fetches it when you browse.

HTML: elements and tags

HTML is made of elements marked with tags. Most elements have a start tag and an end tag with a forward slash, wrapped around the content, such as <p>Hello</p>. Elements with content are called containers; some, like <img>, have no closing tag. Every page has the same basic structure:

Open the full resource free with a TudHub account.

More on Web page editors and design elements

Other resources you can find on TudHub.