Website Basics
You probably use the Internet every day and have visited possibly hundreds of websites. But have you ever wondered just how it all works? Most people have a general understanding, but the technical details usually don’t matter, as long as you can find the information you want, whether its instructional, informative or just entertaining.
But as a site owner and manager, you should have a basic understanding of how your Cadenza website works from a front end and back end perspective.
Front End
When you visit a website on your computer or device, you are viewing what’s commonly known as the “Front End”. This is all of the pages, posts, videos, pictures, etc. The Front End is all your visitors will ever see, but can also be used as a portal for adding content, like making comments on articles or posts, or submitting form data.
Browsers
To view a website, you use a web “browser”. A browser is just an application that interprets the underlying code and renders the pages, pictures, video and text. The most common browsers are Chrome, Firefox, Safari, Edge and Opera. Browsers have some differences in the way they look and work (for the user), but most display websites the same way (with few exceptions).
Hyperlinks
Connecting online documents together is one of the great features of a website. One page of information can lead to another page of related information and so on, through “Hyperlinking”. Adding links is fairly easy and helps site visitors navigate through a website to find the information or content they are looking for. Hyperlinks can be added to text, images or buttons, in a way that makes it easy to understand where the link will take the visitor. Under the surface, a Hyperlink just directs a visitor to a new page or resource, by use of its URL. Hyperlinks can also be used to send emails to someone.
URL (Uniform Resource Locator)
A URL is the address to the location of the file or resource you want to view. In other words, its what you type or see in the browser address bar. For a website, it usually starts with http:// or https:// and is followed by the website address, like www.cadenza.works. If its another page or a specific file on a site, it might also have something like /this-cool-page/ at the end, or even something confusing looking, like /php.post?=774&action =edit. A URL might also simply point to a file, like a PDF, an image or audio clip. Whenever a Hyperlink is added to text, an image or a button, it always points to a URL.
When adding URLs to Hyperlinks within WordPress, you can usually search for the page or post you want to link to. Sometimes you may need to copy and paste the URL yourself, like if you are linking to another website or other address.
Hosting
Website files reside on a Server, a computer with a hard drive that contains all of the actual data files and the software for rendering and serving up a website. Companies that own and maintain these servers are called “Hosts” or “Hosting Companies”. With Cadenza, hosting is provided as part of your subscription, so you’ll never need to worry about maintaining or uploading files to the server. The servers themselves are maintained and supported by the hosting company.
WordPress is a complex application, with dozens of individual files containing code and scripts that all work together to perform the functions of both the front end and the back end. These files are constantly being updated and upgraded to improve performance and add new features.
Databases
Your content is all stored in a Database. In simplistic terms, a database is sort of like a big spreadsheet, a table of intersecting columns and rows that create cells. Within these cells is stored the text, image references and other code (content) for any page or post in your website. This means that your pages don’t really exist as separate files on the server. The content is just “queried” from the database, and displayed on your web page. When you want to view another page, that content is replaced with new content.
Back End
When you login into the WordPress Dashboard or Admin, you are working in the “Back End”. This is also known as a Content Management System (CMS). A CMS is an applications that lets you create and manage all of the content on your website without writing the code or scripts yourself! A CMS is a go-between application, providing you with easy to understand tools for writing and formatting content, adding sections and pages, uploading images and other files, and creating links.
Using a CMS, with a database, means that all of your work is done in the Back End, in the Dashboard or Admin. You won’t create a page and upload it to the server. Instead, when you write a new post or a page, that content just gets loaded it o the database.
You also won’t have to upload images or create folders. Instead, you’ll add images to your Media Library and reference them from there within pages or other content.
HTML, CSS, PHP, JavaScript and more.
Most of these terms don’t mean anything to the average site visitors, but its a good idea to have a basic understanding of what they are and what they mean for your website.
HTML (Hypertext Markup Language)
HTML is a computer language used for creating web pages. Its one of the easiest languages to understand because it often uses plan English. Basically, HTML is used to “markup” content, in a way to either identify what something is, or how it should look. HTML is usually written by surrounding some part of the content with “tags”, which are written using angle brackets.
A simple example might be:
<h3>This is a heading</h3>
HTML designates the “h” as standing for “heading”. The “3” means that its a “Heading 3”, which is a medium sized heading. Notice the opening <h3> tag and the ending </h3> tag (with the slash). These surround and isolate just that one phrase as being the heading.
Here’s another example:
This <strong>word</strong> should be bold.
The HTML tag <strong> means that the word(s) between the tags should use the bold variation of the font.
You don’t have to write HTML, but you might see it if you use the text editor, so its a good idea to have an idea what you are looking at.
HTML defines the overall structure of a page – what words is a heading, which are paragraphs, what section is a list, or a blockquote, or a caption, etc. This all done with HTML tags, but the WordPress editor tools will handle most of that for you.
CSS (Cascading Style Sheets)
CSS is a text file that controls the way things look: positioning, size, color, alignment, font style, etc. CSS can also perform some transitions like small animations, shadows, bevels and other neat tricks.
CSS works with HTML. For example, in CSS, you might define that H3 (Heading 3) mentioned above as being Red. Then anytime you have an H3 on your site, it will appear Red on screen (the front end). If you decide to change the H3 to Green in your CSS, then all H3s on your site will appear Green. This means that in a single CSS file, you can control the way all similar elements appear.
CSS also controls positioning of page elements. For example, a blockquote will often be indented. How much it is indented is determined by a value that is written for the blockquote specified in the CSS file. If you need a greater or lesser indention, then you change the value in CSS. Them every blockquote on your site will adjust automatically.
Using CSS means that you don’t have to format every page, paragraph, heading or list item on your website. CSS defines how these global elements look and behave all from a single CSS file.
In WordPress, the CSS is mostly already written. Changes to CSS is done through the Customizer, which modifies the CSS rules for you. All of this is done by selecting colors or entering values, so you won’t have to write any of the CSS code yourself.
PHP
PHP is the scripting language used by WordPress in the back end for creating the page and post templates and brings all of the back end technology together. PHP is used for querying the database to call and render content, sometime based on certain conditions or inquires.
JavaScript
JavaScript is a programming language and is used with the browser to perform all sorts of interaction in the back end and the front end.