11.4 Putting your Website Content Online

Typical Website Components

A webpage is a little bit more complicated than a standalone document, such a Microsoft Word, Excel or PowerPoint file.  Traditional websites are made up of a combination of different files that are linked together using code, and uploaded to a server together.

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
Many languages and files can be used to put together a website. HTML and CSS are always parsed and rendered in a browser. Source: Components of a website: HTML, CSS, PHP, JS © Julia Grav, used under Fair Dealing.
Diagram of a website showing placeholders for elements such as page header, images, subheaders, bullets, paragraphs, links and buttons, along with an example of what the HTML markup looks like for each element. Source: Markup Language by Seobility, CC BY-SA 4.0

What are HTML & CSS?

Each 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, freeCodeCamp and Codepip.

Uploading your Website to a Web Server

To place pages on the World Wide Web, you will need (1) a domain name and URL and (2) a web server with sufficient space for your files (pages, images, video, audio, and so on).

Tip

Domain names are issued by designated sites such as GoDaddy.com, Domain.com, and numerous others. These sites have a search function where prospective users can see if their desired URL is available. Domain names rent usually annually for $10 and up. Popular names may cost much more.

The domain provider will offer a “pointer” to connect your URL to the server where the content is located.

If you’re studying web design in a university, high school, or continuing education class, the institution may provide a web server and URLs for students to use during the class.

If you have a URL and service space, you will need a file transfer protocol (FTP) program to upload files to the server and set reader permissions. A multitude of free FTP programs are available for download. At Ryerson University we use FileZilla to place files on a student web server maintained by the Computing and Communication Services department.

Diagram shows a sample of what folder setup might look like for files being uploaded directly to a web server. A root directory would hold the index.html file, while images and media would be uploaded into a media folder nested within the root directory. Source: Root Directory by Seobility, CC BY-SA 4.0.

File Preparation and Upload

To upload files to a web server, the authors recommend the following steps:

  1. Make a “gold master” folder on your desktop, such as “site,” and place final files in it.
  2. Place the required .html, .css, and image files for your site into the folder.
  3. Follow naming conventions for convenience:
    • Use all lowercase letters.
    • No spaces in file or folder names — use hyphen (-) or underscore (_) to separate words.
    • No absolute links to images, .css, .js, or other files (e.g., “file///MacintoshHD/images/image.jpg”) in your documents.
  4. Make sure your home page is called “index.html” so the file will load automatically when the folder is entered.
  5. If placing image, .css, and other files in folders, be sure to cite the folder name in the link. E.g., “images/image1.jpg”
  6. If placing .html files in a folder, remember you will have to go up one directory level to get to the index file and other folders. Use “../” before the folder name.
  7. Test the files to make sure all links work.

Avoid renaming any files after organizing the folder. The result is to break any links that have been coded since they no longer match to the filename.

Other Types of Websites

Content Management Systems

Businesses may have their own web space as described above, with a traditional website. However, it’s becoming more common for websites to be 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.

These systems provide a simple way to start up your website, without extensive knowledge of HTML and CSS. They often provide a What You See Is What You Get (WYSIYG) editor that simplifies the process of adding content and makes web publishing much easier.

A CMS:

  • 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

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.

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. WordPress.com provides a site with limited access to the CSS and HTML code, with some available themes and offers different plans, starting with a free version and adding features and upgrades for a cost.  WordPress.org is a highly customizable version of the same platform, but requires you to complete your own site maintenance, have web development knowledge (PHP, HTML, CSS, JS) and gives you full control over themes and other files and settings.

Blogs

Blogs provide another solution for publishing web content quickly and efficiently. While not always suitable for business purposes, some companies may have a blog in addition to their website, and some may use this format to start their web presence quickly.

  • 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
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!

Consider: Types of Websites & Their Applications

There are many different methods for creating a website for personal or business use. Consider your future career path and where you’d like to work.

  • What are the benefits of a blog for business purposes?
  • Why might a business choose a content management system such as WordPress over a traditional website?

Google Sites

Google Sites is a web-based platform that allows you to create and publish websites with ease. But before we get into the nitty-gritty of creating your site, let’s have a quick overview of what Google Sites is all about. Google Sites are free, and provide many of the benefits discussed in the Content Management System section of this page.

You can think of Google Sites as your virtual canvas for presenting information, sharing projects, or even building an e-portfolio. The best part? You don’t need to be a coding wizard to make it happen! Google Sites is (relatively) user-friendly and allows you to easily integrate content from other Workspace apps such as Docs and Slides into your site. It’s a powerful tool for digital collaboration, and allows you to add a touch of flair when showcasing your academic and personal projects.

How to create a website using Google sites will be discussed in the next section of this OER.

Attribution & References

Except where otherwise noted, this page is adapted from

License

Icon for the Creative Commons Attribution-NonCommercial 4.0 International License

DRAFT - Multimedia Communications Copyright © by Marie Rutherford is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License, except where otherwise noted.

Share This Book