Need help tailoring your brand?

How to create your own webpage using html

You have established your brand identity and you want to create a website that reflects that identity, while also being visually appealing with a responsive UI design. How do you even begin? We’ll take it step by step:

You must know the basics

Before you can start creating your webpage, you have to begin somewhere. The basic html elements include the following:
1. <!DOCTYPE html> showing that the document is html 5.
2. The root: This is written as <html>
3. The metadata: This is written as <head>
4. The page title: This is written as <title>
5. The content: This is written as <body>
Adding headings

Headings are a very important part of designing a webpage. Headings help to add structure to the page, giving it a cleaner look and making it easier to scan and digest the information on the page. In HTML, there are headings 1-6 and they are written as <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>.
Adding paragraphs

A webpage wouldn’t be complete without paragraphs. Paragraphs help users to break down the theme of the page into digestible bits that make it easier to understand, eliminating confusion. The paragraph element is written as <p>.
Adding images

Without images a page can feel dull and monotonous. This can make the eyes tired and make users feel bored. Images add excitement, beauty and life to a page. Images are also a great way to consolidate your brand identity. To add images, use the image element, written as <img>. The image element does not have a closing tag. Inside the image tag you have the image source written as src=” “ and the alternative text element written as alt=” “.

Find out how to choose the best image sizes for your webpage.
Adding buttons

Buttons can help users interact with your page and this can keep them interested and increase conversion rate. They are good for your brand as they make it possible for users to make purchases and carry out other actions on your page. To add a button, use the button element written as <button>.
Adding hyperlinks

Hyperlinks act as a way to smoothly transition from one page to another or from one website to another. To add a hyperlink, use the anchor element. The anchor element is written as <a>. Inside the anchor tag you should include the link destination written as href=” “. So you will have <a href=” “>.
Adding lists

Lists help keep your page organized and make it very easy for users to scan and digest the information on a page in a very short time. To add lists, you should use the list item element. The list item element is <li>. It is divided into two: ordered lists and unordered lists. Ordered lists are numbered 1,2,3, etc, while unordered lists are not numbered. Ordered lists are written as <ol>, while unordered lists are written as <ul>.
Spanning

The span element is used to group inline elements to make it easier to style them. It is written as <span>.
Dividing content

Dividing content into different blocks helps to make it easy to style large sections of your code at once, instead of styling them individually. To divide your content for easy styling, use the <div> element.
Inputting text

Sometimes, you might need users to input text on your webpage. An example of this is when users fill out forms. This can really help the users interact with your webpage and can keep them on your webpage longer, increasing the chances of them converting. To create a field where users can input information, use the input element written as <input>. The input element has two subgroups: type and placeholder.
Adding a line break

Sometimes you might need some text on your page to run into the next line, rather than stay on a straight line. The line break element is very useful for such cases. To add a line break, use the <br> element.
Adding a horizontal line

Adding a horizontal line on your page is a great way to signal a change of theme and prepare the minds of the users for something new. To add a horizontal line you should use the horizontal rule element, written as <hr>.

PRO TIP: Most HTML elements have an opening tag <> and a closing tag </>. Some exceptions are the <!DOCTYPE html>, <input>, <img>, and <hr> tags. The <br> tag uses only a closing tag without an opening tag.

Styling with CSS

You’ve created a webpage with HTML, but everything on the page is monotonous, static and limits interaction. This leaves you wondering how to design a responsive webpage. This is where CSS comes in. Cascading Style Sheets (CSS) is a style sheet language that is used to specify or describe how webpages should be styled or designed. It is often used together with HTML to make a webpage more beautiful, more structured and more responsive. It is really important for mobile-friendly website design.

How to style your webpage using CSS

To target specific HTML elements for styling, you need to put the property name in the “style” section, followed by curly brackets and then insert the styles inside the curly brackets. For example, if you want to style the h2 element, you should do the following:

Choosing a color

The colors you use on your page should be your brand’s colors. Consult your brand color palette and make sure to use only brand-approved colors. To choose the color you want your text to be displayed in, use the color property, written as color: followed by the color name or RGB code. To choose a background color, use the background-color property written as background-color: followed by the color name or RGB code.
Creating a margin

In webpage design, there will always be a need to create space around certain elements. This is where the margin property comes into play. The margin property has four specific subgroups that create space on the left, right, top or bottom of an element. These properties are: margin-left, margin-right, margin-top and margin-bottom. To set a margin you should use the margin property followed by the number of pixels.

PRO TIP: If you want to target a group of HTML elements for styling or you want to target a specific member of an HTML element group, use the class selector.

To style the class selector, write it as .(class), followed by curly brackets and put your styles inside the brackets.
Padding elements

Elements inside defined borders (like text in a button) can be padded. Padding creates space around an element within the confines of a border. Note that margin and padding are different in that margin creates space outside of the border, while padding creates space within the border.
1. You could just write padding, followed by the number. This is especially useful when you want all four sides to be padded equally.
2. You could follow the padding declaration with the values for all four sides written on the same line. When using this method however, remember that the values are for the top, right, bottom and left in that order.
3. You could specify each part where you are padding, followed by the value.
Specifying display behaviour

The display property specifies the layout of elements on a page. There are many different ways to display content on a page and your display choice will be determined by your brand needs, message and preference. Most HTML elements have a default display value of block or inline. Block elements take up an entire line by default, while inline elements do not take up an entire line but can accommodate other elements. To display an element as a block element use the block property. To display an element as an inline element, use the inline property.

There are so many other ways to display elements on a page. They include inline-block, flex, grid, table and so on. MDN Web Docs has article that explains the CSS display property in great detail.
Creating a border

A border is a great way to fence objects and enclose them within a given space. Creating a border around objects helps to add beauty to the page and also helps to highlight the fact that they are distinct. To create a border, use the border property. The border property has the following child properties:
- border-width specifies how wide the border should be in any direction.
- border-style specifies how the border should be styled. It could be dotted, solid or dashed.
- border-color specifies the color of the border.
- border-radius specifies how round the border edges should be.
Styling your font
1. Choosing a font-family:
  Fonts are an important aspect of your brand identity and you should choose the fonts that reflect your brand when designing your webpage. To style your font you have to specify the font family, then choose the style you want for your font, then the font size and also the font-weight, depending on what has been approved by your brand.
2. Choosing a font-style:
  The font-style property specifies how you want your font to be styled. There are options like normal, bold, italic and oblique. The font-style you choose also depends on your content. You can use font styles to emphasize, make text more visible or just simply decorate portions of your content.
3. Choosing a font-size:
  It is important that your text is displayed in the correct font size as the wrong font size can have a negative impact on user experience. To choose a font size you should use the font size property, written as font-size: followed by a number and then px.
4. Choosing a font-weight:
  You can use the font-weight property to specify how thick or thin you want your fonts to be when they are displayed. The font-weight property ranges from very thin (hairline) to black (heavy) and you can use whichever one that will help you achieve your desired effect and is in line with your brand’s identity.
Let's see an example of how to style your font:

Conclusion

A website is made of different webpages linked together. All the information on a website is displayed through webpages. A webpage has the benefits of functionality, content delivery, navigation, user interface, brand representation and content organization. To create a webpage you will need to use HTML elements and then style those elements using CSS.

As part of its tailored branding services, iBCSCorp has been helping businesses create amazing webpages that reflect their brand identity. Our team of web design experts have extensive experience and expertise, designing responsive websites by creating great webpages that are outstanding, user and mobile friendly, and built for excellence.

Give us a call today and let our professionals help you create an awesome website that’s easy to navigate!