3.2 What is a website?

The foundational languages used to create the front-end design of a website are HyperText Markup Language (HTML), and Cascading Style Sheets (CSS). Take a moment to explore the code that is generating this web page by right-clicking on it, and choosing Inspect (Element). You will see the code, styles, image sources and all the data that is being rendered by the browser. The image below shows the basic building blocks of a website.

Components of a website: HTML, CSS, PHP, JS
Figure 4 – Many languages and files can be used to put together a website. HTML and CSS are always parsed and rendered in a browser.

What is HTML & CSS?

Each web page on a website is a unique HTML file. This file contains the content (text and file paths to images stored on the server) that you see on the page. The styles and design of how this content is presented are created in the language CSS. CSS can either be linked to the HTML page from an external CSS file (most efficient), or by having the CSS code contained within each HTML page itself.
 
Note Knowing HTML and CSS allows you to customize your web pages. They are very powerful yet basic coding languages. Useful definitions, references, and tutorials can are available at W3Schools[1], freeCodeCamp[2] and Codepip[3].

Content Management Systems

Most modern websites are built using a Content Management System (CMS). You have probably heard of at least one of these many popular options: WordPress, Joomla, Wix, Weebly, Squarespace, Shopify, etc. A CMS is an application used to edit and manage a website’s content, using a user-friendly Graphical User Interface (GUI) rather than requiring the direct editing of code.

A CMS, like WordPress:

  • Provides the background architecture to ensure database and server-side functionality.
  • Maintains and updates the system architecture.
  • Gives many template options that are easy to utilize and install.
  • Allows the focus on content and imagery rather than coding.
  • Creates the site navigation elements.
  • Supports database integration.
  • makes content indexed and searchable.
  • …and much more

Website verses Blog

Here are a few key differences between a blog and a website. For the purposes of this course we will be focusing on designing an effective website for a business, not a lifestyle blog.

  • The term blog is an abbreviation for web log
  • Blogs often contain an ongoing collection of time-based posts, presented in chronological order
  • Blogs are often, but not always, written in a journal-style commentary
  • A website usually contains informational pages, but can also have a blog section

Purpose of a Blog

Blogs can be used to:
  • Drive traffic to your website
  • Convert that traffic into leads or sales
  • Establish authority on a topic
  • Create community 
  • Be creative & have fun
  • Follow your passion about a particular activity or topic!

What is WordPress?

WordPress is one of the most popular CMS. According to W3Techs 43% of all websites are built using WordPress. Being an open source platform means that anyone can contribute themes or plugins, help validate code and contribute to the system update. When making a site using plain HTML, each new page must be created manually. A CMS like WordPress simplifies the process of creating and adding content and images to your website.

WordPress.com vs. WordPress.org

There are two options versions of WordPress: WordPress.com and WordPress.org. In both you can install and utilize 1000s of plugins to add features to your site.
The main differences between the two are explained below:
 
WordPress.com
  • The default URL is yoursite.wordpress.com (hosting & domain maintenance by WordPress.com). There are paid options to add your own customized domain name.
  • Limited access to the CSS and HTML code of your site for customization
  • Themes are included but you cannot upload your own theme or use plugins
  • Offers different plans, including free, with added features & upgrades
WordPress.org
  • By default you use a custom domain for your URL (yoursite.com) without the WordPress sub-domain
  • You are in charge of site maintenance, including customizing your CSS and HTML and database support
  • Requires web development knowledge (PHP, HTML, CSS, JS)
  • More theme options available to use and the ability to upload your own themes and modify templates.
  • Full control over theme files and settings

Media Attributions

  • Components of a website: HTML, CSS, PHP, JS © Julia Grav
  1. Refsnes Data. (n.d.) Learn to Code. https://www.w3schools.com/ ↵
  2. freeCodeCamp. (n.d.). Learn to code. https://www.freecodecamp.org/ ↵
  3. Codepip. (n.d.). Learn to code by playing games. https://codepip.com/ ↵

License

Icon for the Creative Commons Attribution 4.0 International License

Maintaining an Online Presence Copyright © 2022 by Camosun College is licensed under a Creative Commons Attribution 4.0 International License, except where otherwise noted.

Share This Book