If you want to design a website and run it successfully, you need at least a basic understanding of HTML, CSS, and PHP.
Every website frontend runs on HTML and CSS, while backends may be built with scripting languages such as PHP, JavaScript, Ruby, C++.
But, while it’s extremely useful to learn HTML and CSS, you don’t have to learn them. In fact. most beginners do not interact with HTML, CSS, JavaScript, or PHP when building and maintaining a website.
However, it’s important to learn these website building blocks if you want to excel at website design and customization. For example, changing theme colors and global website fonts for a WordPress site requires changing the CSS file.
Expert tip: HTML and CSS are really easy to learn; you can understand the basics in a few hours. The real challenge is achieving mastery to a point where you can design a website from scratch, which can take years of practice.
What Is HTML?
HTML is a web-specific language that defines the layout and presentation of content on a web page. It uses special tags that create rules on content formatting and display (rendering).
The most common tags include the following:
- Title tag, <title>This Is My Title</title>
- Header tags, e.g., <h1>Headline1</h1>, <h2>Headline2</h2>
- Paragraph tags, e.g., <p>paragraph</p>
- Body tags, <body>this is my body text</body>
- Bold tag, <strong>example bolded text</strong>
- Link tag, <a href=”https://truehost.ph/email-hosting/”>What is email hosting</a>
- Ordered and unordered list tags, <ol>ordered list contents</ol> or <ul>unordered list contents</ul>
- Here’s a list of all HTML tags for everything including images, block quotes, addresses, citations, and anything else you can think of
Here’s some example code showing HTML tags in action.
<html>
<head>
<title> Example Page Title </title>
</head>
<body>
<p>This is an example blog page. We'll try some <strong>bold words</strong> and some in <i>italics</i> to demonstrate tags in action. We'll even add a <a href="https://truehost.ph/">hyperlink</a>
</p>
<p>This is an example of an unordered list.</P>
<ul>
<ul>Example list item 1</ul>
<ul>Example list item 2</ul>
</ul>
<p>Example of an ordered list.</p>
<ol>
<ol>List item 1</ol>
<ol>List item 2</ol>
</ol>
</p>
<p>End of document</p>
And here’s how it would show up in a simple webpage or digital document.
As you can see, a web page written in HTML only is very plain and boring. That’s because HTML doesn’t include styling information such as fonts, alignment, text colors, or background.
Styling and formatting information is contained in a different file called a CSS stylesheet.
What Is CSS?
Cascading Style Sheets (CSS) is a style sheet language used to define content styles and formatting on web pages.
In other words, CSS defines content presentation while HTML defines rendering. The two work hand-in-hand to describe the final webpage design.
CSS isn’t a markup language like HTML, neither is it a programming language (like Python or PHP). CSS stylesheets work like a template file that contains all the instructions about how the content on a web page or an entire website should be styled.
Similar to HTML, CSS uses special rules called selectors to describe appearance. For example, CSS selectors define fonts, color, syntax, text dimensions, margins, lists, links, graphics, tables, opacity, and more. Learn more about CSS here.
As your website grows and becomes more complex, it will become vital to learn how to change HTML and CSS. For example, making site-wide changes is next to impossible if you don’t know how adjust a theme’s CSS properties.
CSS example code
Modern CSS (CSS 4.15 at the time of writing) is really intuitive and easy to learn. Here’s an example CSS code snippet.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color:orange;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: Times New Roman;
font-size: 20px;
color: red;
}
</style>
</head>
<body>
<h1>CSS Example</h1>
<p>This is an example blog page. We'll try some <strong>bold words</strong> and some <i>in italics</i> to demonstrate tags in action. We'll evn add a hyperlink.</p>
<p>This is an example of an unordered list styled with CSS.</p>
<style>
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
padding-left: 16px;
}
li::before {
content: ">";
padding-right: 8px;
color: purple;
</style>
}
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<p>End of document.</p>
<style>
h2 {
font-family: cursive;
color: blue;
text-align: left;
</style>
</head>
<body>
<h2>Add another section</h2>
<body>
</body>
</html>And the screenshot below shows the results of the CSS code shown above.
Even for a beginner, changing the background, font, or header color is as easy as editing the values in the respective elements. Go to W3 Schools to play more with CSS code just like this.
Expert tip: W3 Schools is a wonderful resource for learning HTML, CSS, PHP and several other web development languages. It’s completely free and very beginner-friendly, and we will be referring a lot to the resources it offers.
The WordPress Visual Editor
You likely won’t need to use CSS or HTML for creating and publishing regular content. CMS tools, such as WordPress, provide a block editor that allows you to type your content naturally, just as you would on MS Word or Google Docs.
The editor creates the code for you in the background. Since the content will be published just as it appears in the block editor, visual editors like the WordPress Gutenberg is called a WYSIWYG (what-you-see-is-what-you-get) editor.
Gutenberg allows easy formatting and presentation of content. It provides a lot of flexibility and customizability while maintaining simplicity and seamless functionality.
Here’s some example content as typed on a new WordPress post.
This one has a better look and feel compared to the plain HTML example. Taking a look at its code, we find the following:
| <!– wp:paragraph –> <p>This is an example blog page. We’ll try some <strong>bold words</strong> and some in <em>italics</em> to demonstrate tags in action. We’ll even add a <a href=”https://truehost.ph/”>hyperlink</a>.</p> <!– /wp:paragraph –> <!– wp:paragraph –> <p>This is an example of an unordered list.</p> <!– /wp:paragraph –> <!– wp:list –> <ul><!– wp:list-item –> <li>Example list item 1</li> <!– /wp:list-item –> <!– wp:list-item –> <li>Example list item 2</li> <!– /wp:list-item –></ul> <!– /wp:list –> <!– wp:paragraph –> <p>Example of an ordered list.</p> <!– /wp:paragraph –> <!– wp:list {“ordered”:true} –> <ol><!– wp:list-item –> <li>List item 1</li> <!– /wp:list-item –> <!– wp:list-item –> <li>List item 2</li> <!– /wp:list-item –></ol> <!– /wp:list –> <!– wp:paragraph –> <p>End of document.</p> <!– /wp:paragraph –> |
As you can see, this code combines HTML and CSS. There are also some extra tags that help to improve readability and styling.
For example, the <!- – wp:paragraph – – > tag adds extra space around a paragraph. This allows for some cool stuff, such as creating backgrounds or defining margins for individual paragraphs.
That kind of flexibility has made WordPress one of the most popular CMS systems in the world, commanding 43.2% of all websites.
Website builders like Olitt or Wix make it even easier to design and build a website because you don’t need to fiddle with code. If you lack technical skills, use Olitt’s drag-and-drop features to build your website easily and quickly.
HTTP, HTTPS, and SSL Explained
While HTML controls how content is displayed on a browser, HTTP (Hypertext Transfer Protocol) handles communication between web browsers (the client) and web servers.
HTTPS is the secure version of the HTTP communication protocol. It’s secure because it automatically encrypts data in transit over the internet.
We don’t need to go too deep into this, except to mention that every modern website needs to use HTTPS for security reasons. HTTPS data encryption and verification helps prevent data alteration or interception by malicious people.
HTTPS is always used for the transfer of sensitive information (like login credentials) and online payment details.
Even if you’re not processing sensitive data, you should still use HTTPs. Google doesn’t like sites without an SSL certificate, which is bad for rankings and revenue.
What is an SSL certificate?
SSL certificates are digital certificates that authenticate a website’s identity. It works like a digital ID card where a third party (a Certificate Authority, or CA) evaluates and verifies the website and its owners to rule out malicious intent.
Thus, a valid SSL certificate means that your browser (and you) can reasonably trust that site.
A more accurate word for an SSL certificate is “TLS certificate.” SSL is an outdated security protocol and has known vulnerabilities, while TLS is the modern, secure version of the protocol.
A TLS certificate is basically a data file stored in a website’s server and contains site’s unique public key and a secret private key. These keys are used for authentication, encryption, and decryption of data.
If anyone intercepts data from a HTTPs website, all they will see is a garbled mix of characters that they cannot decrypt without the unique public and private keys.
Every website, or more accurately, every domain, needs an SSL certificate. Simple websites can make do with a free SSL certificate, like the one you get when you host your website with Truehost.
However, premium SSL certificates offer much better security, assurance, and trust. Once your website starts handling user data or payments, get affordable SSL certificates from Truehost for increased security.
Expert tip: A site with a valid SSL certificate is easy to identify. Find the closed padlock sign at the View Site Information button located at the start of the URL bar. That icon means that this is a trusted website and all data is securely encrypted before transfer.
What Is PHP?
Pre-HTML programming language, or PHP in short, is a scripting language used in web development. It allows more powerful functionality compared to HTML.
For example, while HTML only creates static webpages, PHP allows a browser to execute scripts such as data collection forms, complex animations, login pages, website calculators, and many more.
Embedding PHP means that you can add it to standard HTML code using special start and end markers that tell the browser how to process the instructions. Check out the example below to show how PHP and HTML work together in a form, or check it out at W3 Schools.
PHP is also widely used in website back ends (server-side) for developing complex functionality, especially in e-commerce sites or social media platforms.
This versatility makes PHP one of the most important web development languages. Some websites use only PHP, including Facebook, Wikipedia, WordPress, Etsy, and Canva.
In fact, PHP powers 76.5% of all websites. The language has a vast library of libraries and frameworks that developers can use to extend its functionality and applications.
In addition to being extremely powerful and robust, PHP is also easy to learn. The language is open-source and has grown a vast library of resources you can use to learn and master the language.
Expert tip: If you’re interested in web development and coding, you should know that PHP is not well suited to building mobile apps. You’re better off learning Java or Python instead. Start with HTML and CSS, then graduate to JavaScript to build your confidence.
We’ll Help You Build a Successful Website
It sounds like building a website is hard work, doesn’t it? Even a simple business website with a signup form, a few product categories, and payment processing can become technically challenging for the average WordPresser.
But Truehost can help.
When you build your website with Olitt, you don’t need to worry about HTML, CSS, or PHP. You can use the gorgeous templates to setup a basic site, which you can then customize with easy drag-and-drop features.
Olitt sites come with in-built payments and analytics functionality. If you need to, you can also add more features (like live chat or Facebook Pixel) by adding custom JavaScript code to your site.
Best of all, Truehost technical support will guide you through domain name registration, website hosting, DNS setup, SSL certificate installation, and any other challenge you may face.
In fact, Truehost offers the most user-friendly and affordable managed website hosting services.