Idea Maker

Orange County Web and Mobile App Development

Schedule a Call

HTML and CSS 101: The Basics of Website Development

Did you know that over 94 percent of all websites use HTML, while over 96 percent use CSS? These two coding languages are the very foundations of the websites we use daily. In fact, the website you’re reading this article on is based on HTML and styled using CSS. So, if you want to learn web development, fully grasping the fundamentals of HTML and CSS are crucial, especially when developing at a higher level.

In this Idea Maker guide, we’re going to take you through the basics of HTML and CSS so you can get started with your first website development. Keep reading to learn more.

 

What Is HTML?

HTML, or Hyper-Text Markup Language, is an official web standard that allows coders to create web pages using various tags and elements that modify page structure, font colors, font style, and image placement. Notice the term “official web standard” instead of “development language?” Well spotted. This is because HTML is no longer considered a development language, as it’s not able to produce dynamic functionality. However, for the purposes of this article, we’ll continue to refer to it as a language.

 

What Is CSS?

CSS, or Cascading Style Sheets, is a companion language to HTML. Though CSS is not strictly necessary, without it HTML web pages are often poorly formatted and, frankly, ugly. While HTML might take care of a website’s content and structure, CSS is responsible for formatting, style, design, and overall appeal.

 

Essential HTML Tags

In order to properly set up a HTML document, there are several crucial tags you need to know. These are as follows:

  • <!DOCTYPE html> – This tag should be placed at the beginning of your document, as it signals to web browsers what type of document is being loaded.
  • <html></html> – This tag signifies the beginning and end of your HTML document. All website content and further tags should be placed between these two tags. As you can see, the use of a “/” signifies the end of a tag and where its effect or content ends.
  • <head></head> – Information added to this tag does not appear on your web page. This tag is used to signal additional information to search engines and web browsers, such as the page’s title and meta description. These can be added using <title></title> and <meta></meta>.
  • <body></body> – Your web page’s content and additional tags will go between the body tags.

These tags must be inputted into your HTML web page only once and in the above listed order. Otherwise, your web page will encounter errors.

Aside from the essential tags, you’ll need to know how to load a CSS stylesheet into your HTML. This is done by using the follow tag:

  • <link rel=”stylesheet” href=”mystyle.css”>

Here, the “rel” denotes what type of document you’re trying to import into your HTML file, and the “href” allows you to locate your stylesheet by name. Ideally, you will use a script editor with multiple document tabs, making stylesheet loading simple. Otherwise, make sure your CSS file is in the same location as your HTML document.

Alternatively, you can simply write your CSS code directly in your HTML document between the <style></style> tags. If you choose this method, ensure that your style tags are placed below your head tags and above your body tags.

 

Essential CSS Properties

Unlike HTML, CSS uses “properties.” These signal to web browsers how certain HTML elements should appear when displayed. What’s more, a CSS stylesheet doesn’t necessarily have to follow a rigid structure like a HTML doc, as you may not wish to style all elements.

Unlike HTML tags, CSS properties are opened and closed using brackets { }. The property name refers to the correlating HTML element. Code can be inputted within the brackets to modify said elements. Most properties are fairly self-explanatory:

  • background-color: lightblue; – This can be used to change the background color of a web page when inputted in the body section. Notice how the syntax is spread across multiple lines, and how a semicolon is used to signify the end of this parameter. Of course, the command following the colon can be changed depending on your preferences. 
    body {
      background-color: lightblue;
}
  • color: red; – This property can be used to change the color of HTML elements, such as headings and text. 
    h1 {
      color: red;
}
  • margin-left: 30px; – This property is used to determine the position of an element relative to the browser window. Whatever element the property is associated with will sit 30 pixels from the page’s left margin. This property can be changed to margin-right. 
    h1 {
      color: red;
      margin-left: 30px;
}
  • max-width: 100%; – This property is used to determine the width, or height, of an element relative to the browser size. For instance, when set to 100 percent, an image will appear in its original resolution and resize accordingly as the browser window size changes. This is an excellent property to know when building responsive websites. In the below code, “img” refers to all images added to your HTML web page. 
    img {
      max-width: 100%;
      max-height: 50%;
}

 

How to Build a Website With HTML and CSS Using a Template

If you’re planning to build a website from scratch using HTML and CSS then, with the above tags and properties, you’re ready to make a start. All you need is a script editor like Notepad++ or Komodo. However, if you’re not ready to jump in at the deep end, you can choose to build a HTML website using a template.

  1. Pick a Template Homepage Design

    There are many websites that offer extensive libraries of attractive HTML website templates, such as Bootstrap and Envato Market. Generally, the best HTML website templates are paid, especially if you’re looking for dynamic functionality. However, as you’ll be customizing your template for yourself, a free one should do the job.

    When choosing a HTML website template, make sure to select one that is responsive, easily customizable, and comes with any necessary design assets. If you’re unable to find a HTML website template that satisfies your requirements, you should consider either hiring an expert website developer or exploring WordPress theme development instead.

    Related Page: A Complete Guide To WordPress Theme Development in 2022

  2. Update Stylesheet

    Once you’ve found and downloaded a HTML website template, you’ll need to update its stylesheet to reflect your chosen colors and design preferences. Depending on the template, you’ll find its stylesheet either at the top of the HTML document or below the head tags. Otherwise, the HTML template should have been downloaded in a folder containing a CSS file. Once located, go ahead and make whatever changes are necessary. Remember, updating the CSS sheet will on change the website’s aesthetics and formatting, it will not affect content or site structure.

  3. Add Personalized Content

    Next, it’s time to turn the HTML code and add personalized content. As you look through your HTML document, you’ll notice many heading and paragraph text filled with filler content. Oftentimes, you’ll see the industry standard placeholder text “lorem ipsum,” which is a made up and meaningless language, created for the purposes of design.

    When you come across instances of placeholder text and headings, go ahead and update them with your own content. If you’ve already modified your stylesheet to reflect your design preferences, you should not have to make any further changes regarding style and format.

    In the HTML document you will also find images referenced using this tag:

    • <img src=“imagename.jpg” alt=”place holder image” width=”500″ height=”600″>

    In this code, “src” specifies the source of the image you wish to include on your website – it should be saved in the same folder as your HTML document – and “alt” specifies the images alt tag for SEO and accessibility purposes.

  4. Upload Website to Web Host

    Once you’ve finished customizing your HTML website template and are satisfied with the results, it’s time to upload your document to a web host. This process will depend on your web hosting provider. Excellent web hosting and domain name providers to consider include GoDaddy and Domain.com.Generally speaking, you’ll need to install a File Transfer Protocol (FTP) client, such as FileZilla. You’ll then be able to connect to your web host using a server link provided by them, which will give you access to your servers folder. There, you can upload your HTML and CSS document, along with any required assets.

Problems with Template Sites

Compared to building a HTML website completely from scratch, template websites are a convenient and fast way to create a site. However, there are several drawbacks to using a template site instead of developing a custom website.

Slow Loading

HTML template websites are not made for optimum performance or search engine optimization. In fact, many HTML template sites are riddled with bloatware, usually CSS animations added for aesthetic appeal. Although this improves the look and feel of the website, bloatware significantly reduces site load time, damaging your search engine rankings.

Low Functionality

Template websites are cheap and cheerful, meaning they do the job in terms of design, but fall short regarding functionality. For example, if you’re looking to build an online store or customer portal, using a template site is not a viable option.

Low Flexibility

Although you might be able to customize a HTML website template to a degree, customization options are limited. This is because templates are typically designed to serve simple purposes, not with substantial customizations in mind. Fully personalized sites require custom development; templates will not suffice.

 

Want to Save Yourself Some Time?

Unless you’re happy to endure the disadvantages of template websites without adequate customization, building a website from scratch is a challenging and time consuming process. Why not hire the experts at Idea Maker and save yourself some time and effort? Our team of experienced website developers are at your disposal, to create stunning and functionally effective sites that meet your requirements. Schedule a free consultation with us today to learn more.

James Ball

Author
Share This Article

What is the difference between HTML and XHTML?

HTML (Hypertext Markup Language) and XHTML (Extensible Hypertext Markup Language) are both markup languages used to create and structure web pages. However, there are some important differences between the two.

The main difference between HTML and XHTML is the way they are implemented. HTML is an application of Standard Generalized Markup Language (SGML), and is primarily designed to display data and create visual layouts for web pages. XHTML, on the other hand, is a stricter and more XML-compliant version of HTML. It is a separate markup language, but it is based on HTML and can display the same types of data.

Another key difference between HTML and XHTML is the syntax. XHTML has stricter rules for writing code, requiring all elements to be properly nested and all tags to be closed. In HTML, it is not necessary to close all tags, and some tags don’t need to be closed at all. XHTML also requires all attribute values to be enclosed in quotation marks, which is not a requirement in HTML.

Additionally, the support for Deprecated and Obsoleted features are also different. XHTML does not support features that were deprecated or obsoleted in HTML.

XHTML is also designed to work with XML, and therefore can be processed by XML-based technologies, such as XSLT, which can transform the content of a web page into a different format. HTML is not designed to work with XML, and therefore cannot be processed in this way.

So, while both HTML and XHTML can be used to create web pages, XHTML is a more strict and consistent version of the language, and is better suited for use in XML-based environments.

What are some common CSS properties and how do they affect website layout?

CSS (Cascading Style Sheets) is a language used to control the presentation of a web page, including layout, color, and typography. Here are a few common CSS properties that can be used to affect the layout of a website:

  • Display: This property specifies how an HTML element should be displayed on a web page. Common values include block, which causes the element to take up the full width of its parent container and create a new line after itself, and inline, which causes the element to take up only as much space as necessary and not create a new line.
  • Width and height: These properties specify the width and height of an element, respectively. They can be set in pixels, percentages, or other units of measurement.
  • Margin and padding: These properties specify the amount of space around an element. The margin property sets the amount of space outside of an element, while the padding property sets the amount of space inside of an element. They can be set individually for the top, right, bottom, and left sides of an element (e.g., margin-top, padding-right) or all at once (e.g., margin: 20px).
  • Float: This property specifies whether an element should float to the left or right of its parent container, allowing text and other elements to wrap around it.
  • Position: This property specifies how an element should be positioned within its parent container. Common values include static (the default value), relative, absolute, and fixed.
  • Flexbox and grid: These layout methods are more recent and are used to create flexible and responsive layout. Both provide a way to create flexible, grid-based layouts, but Flexbox is mainly used to lay out elements in a single dimension, while Grid Layout is mainly used to lay out elements in two dimensions.

These are just a few examples of CSS properties that can be used to affect website layout, and there are many other properties available as well. Combining different properties and values can help you create complex and interesting layouts for your website.

How do HTML and CSS work together to create a website?

HTML and CSS work together to create a website by separating the content of a webpage from its presentation.

HTML (Hypertext Markup Language) is used to create the structure and content of a webpage. It consists of a series of elements, each represented by a tag, that define the different parts of a webpage, such as headings, paragraphs, images, links, and so on. Each element can have attributes that provide additional information about the element, such as its id or class.

CSS (Cascading Style Sheets) is used to control the presentation of a webpage. It consists of a series of rules that determine how elements on a webpage should be displayed, including their size, color, and layout. Each rule has a selector that specifies which elements it should apply to, and one or more declarations that define the styles to be applied to those elements.

When a browser loads a webpage, it first parses the HTML to create the Document Object Model (DOM), which is a tree-like structure that represents the hierarchical structure of the elements on the page. Then it parses the CSS, and applies the styles defined in it to the elements of the DOM.

By separating the content and presentation in this way, HTML and CSS make it easy to change the look and layout of a webpage without affecting its content, and also to create separate stylesheets that can be used to apply the same styles to multiple pages or even different websites.

Additionally, by using CSS, it becomes easier to maintain and change the website, as the styles can be changed in a centralized file and get applied to all webpages and this reduces the amount of code duplication, making it more manageable and readable.

Set Up a Free Consultation

Schedule a Call

Leave us a Message