Structure of Websites Built By Ready Artwork


Our developers at Ready Artwork have built a large variety of websites for our current and past clients. We use WordPress as the foundation of all Informational Websites and Magento as the foundation of all E-Commerce Websites and E-Catalog Websites. Although WordPress and Magento are two different Content Management Systems, the technologies and structures used by both are similar. A typical website built by Ready Artwork can be broken down into five parts:


HTML (HyperText Markup Language)

HTML marks up the structure of all content in a website. All texts, images, and videos on a website are surrounded by HTML tags. For example, a paragraph on a webpage is surrounded by the “<p>” tag. A hyperlinked image or text is surrounded by the “<a>” tag. Besides adding basic structure to the content, you can also add “class” and “id” to HTML tags so that you can easily style the content with CSS. Think of HTML as the exterior structure of your car.

Code Example:

A normal paragraph text surrounded by the “<p>” tag

CSS (Cascading Style Sheets)

CSS tells a web browser how to display the HTML elements. It is the skin layer of a website. For example, you can specify all text surrounded by the “<p>” tags (All Paragraphs) to be in “color: blue”, “font-size: 30px”, and “margin-bottom: 50px”. You can also target a specific paragraph with a specific “class” or “id” if you want to have different styles for different paragraphs. Two websites with the exact same content and functions can look completely different with various CSS. Think of CSS as the color and styling of your car.

Code Example:

A normal paragraph text surrounded by the “<p>” tag and styled in “color: blue”, “font-size: 30px”, and “margin-bottom: 50px”

PHP (PHP: Hypertext Preprocessor)

As its name suggests, PHP preprocesses the content before it gets displayed as HTML. It adds functions and logic to a website. For example, you can use PHP to automatically get today’s date and surround that date with HTML tags (versus manually updating the date everyday). You can use PHP on a specific image to show up only on certain dates (versus manually putting/taking out the image on those dates). You can also use PHP to send emails! PHP makes a website dynamic versus a static HTML website. Think of PHP as the engine of your car.

Code Example:

Use to display the current date in “YYYY-MM-DD” format

MySQL Database

MySQL is the most popular Open Source SQL (Structured Query Language) database management system. It is used to store all content (username, password, blog posts, products information, etc…) of a website. WordPress and Magento use PHP to communicate with MySQL database to store/retrieve/delete content. This allows the use of PHP templates that can dynamically update the content of a website whenever you make a change in the backend instead of going into the HTML code of a specific area and manually updating the content. Think of MySQL as the information stored in your car system.


JavaScript adds extra functions to a website after all the contents have been preprocessed (PHP). Most of the elements that are moving after a webpage has finished loading are using JavaScript. Some common examples of JavaScript include Pop-up Image Galleries, Image Sliders and Google Map Integration. You can also use JavaScript to do something as simple as adding a “class” to a HTML element after a button is clicked and use CSS3 to make HTML element with that specific “class” move. Think of JavaScript any external functions like windshield wipers of your car.

Code Example:

The following will display a popup box on click of a button:

<button onclick=”myFunction()”>Click it</button>

Ready Artwork always seeks to build websites that have high quality frontend (HTML/CSS), backend (MySQL Database) and functionality (PHP/JavaScript) suitable for each client. If you are interested in having a quality website built for your business, contact us today!

Meet the Author
Web Developer
meet the author
Related Articles