Introduction into Web Development: HTML and CSS

Introduction

Welcome to the world of web development which is not an easy thing, to begin with, and even harder if you going to learn the wrong things. The tech industry as a whole is huge and is divided into a lot of different branches but you are here because you want to build a website not learn about the entire tech world. In this article, we'll explore the basics of HTML and CSS, two essential tools for building websites so you can go and build yours and get your feet wet in the world of web development.

Hypertext Markup Language better known as HTML is a language used to create structured content for web pages, while Cascading Style Sheets which is known as CSS is used to customize the appearance of that content. By writing these two languages separately, it's much easier to focus on either content or appearance without worrying about both at the same time. If you don't, you'll learn the hard way and find yourself overwhelmed before you even start with the complex tasks when working with them.

Think of a web page like a newspaper page, for those who are born in this generation, a newspaper is what people used to read before the web was created. In the old days, it was someone's responsibility to physically arrange elements in a newspaper printing press to tell a story. They would set attention-grabbing headlines, they were complemented by content in paragraphs. Depending on the newspaper, the exact type-setting would have a certain font and characteristic style. The aesthetic appearance of the page was different from the content itself.

On a newspaper page, you have headings, sections, articles, images, and layouts that organize content in a visually appealing way. This is the same for web pages, you use HTML to create structured content to tell a story and CSS to style it and visually bring the content to life.

Telling a story with HTML

Let's go over HTML in more detail and learn how to tell a story with your code.

When writing documents, it is important to structure your content in a way that makes sense. The same is true when writing HTML for a web page.

Compare these two articles on a camping website. Which of these two do you prefer?

The content on the right tells a better story because it shows the hierarchy of information and is more understandable thanks to its structure. This is accomplished by writing good HTML.

But you're not the only one "seeing" your content - browsers and search engines also see your web page. Search engines like Google read your website's code to figure out what the page is about so that it can be shown in search results. Your browser also reads your code to display elements in a certain way. If you don't write clear HTML, your site won't be readable because browsers won't know what to do with it.

HTML used tags to describe each piece of content on a web page. It's up to you as a developer to choose the right tags. Look at this example line of HTML from the camping example:

<h1>Camping essentials</h1>

In this example, <h1> is an opening tag that indicates that the following content should be displayed as a heading. The text "Camping essentials" is the content that will be shown as a heading. Finally, </h1> is a closing tag that indicates that the heading element has ended.

Most HTML elements follow this pattern of opening tag, content, and closing tag. Let's look at another example:

<p>Packing the right gear is crucial for having a good time on your next camping trip.</p>

In the above example, <p> is an opening tag that indicates that the following content should be displayed as a paragraph. The text "Packing the right gear..." is the content that will be shown as a paragraph. Finally, </p> is a closing tag that indicates that the paragraph element has ended.

HTML allows you to create structured content for web pages by using tags to describe each piece of content. By choosing the right tags and logically organizing your content, you can tell compelling stories with your code.

Decorating Your Content with CSS

We'll take a closer look at Cascading Style Sheets(CSS) and see how it allows us to control the appearance of our web content.

CSS allows you to style your web page. Styles are like decoration. They control things like colors, spacing, placement, and layout. For example, you might use CSS to make your website's background color yellow or change the font of your text.

CSS also allows you to create layouts for your site by controlling how different pieces of content are arranged on the page. For example, developers use CSS to create columns or horizontal bars on websites like this:

While CSS is very powerful, it depends on HTML. Think of decorating a house - first, select the element you want to decorate (like the bedroom walls or living room floor), then you specify how it should look (like painting the dining room walls red or carpeting the living room floor). In the same way, you use CSS to select an HTML element and then specify how it should look.

Here's an example of how CSS can be applied to HTML:

p {
    color: blue;
    font-family: Arial;
}

In this example, p refers to the <p> paragraph tag in HTML. color: blue is a CSS property that sets the text color to blue. font-family: Arial is another property that sets the font of the text of Arial. The curly brackets {} open and close a set of style rules in CSS.

Here are the before and after results of applying this CSS to some HTML:

CSS allows you to control the appearance of your web content by setting styles for different HTML elements. By using CSS in combination with HTML, you can create visually appealing web pages with structured content and customized appearance.

Common HTML Elements

Let's look at a broad overview of common HTML elements that you'll find useful when building your very own site. - choosing elements with purpose.

As you use these elements, bear in mind what we have already discussed above. The HTML you write should suit the story you want to tell with your content. This means choosing elements with purpose.

Textual Structuring

Adding some structure to a text creates what we call a hierarchy for the content in an immediate, easy-to-understand way. Apply the same thinking to the text in your pages by using <h> elements and <p> elements. You've already seen both in the article.

Heading Elements

Create headings in HTML by using tags that include a lowercase "h" and a number from 1-6. The numbers 1-6 let you control the default size of your heading and therefore the importance it has in the structure of your page.

What do Heading Tags Look Like?

What do each of these tags - h1>, <h2>, <h3>, <h4>, <h5>, <h6>

This is what they look like on a web page

<h1>I'm an h1 heading!</h1>
<h2>I'm an h2 heading!</h2>
<h3>I'm an h3 heading!</h3>
<h4>I'm an h4 heading!</h4>
<h5>I'm an h5 heading!</h5>
<h6>I'm an h6 heading!</h6>

As the number from 1-6 increases the heading becomes smaller.

Using Headings Effectively

If you still wondering why you might need so many headings, remember that <h1> headings are often reserved for page titles, smaller headings are to delineate articles and sub-sections, etc. You should only use one <h1> heading per page so as not to confuse your reader or browser/search engines about the page's primary content, but you're free to use the others as much as you like.

You just need to make sure your opening and closing tags match as you make headings. If they don't, your headings won't work. For example, <h1>Big heading</h3> won't result in a heading because h1 in the opening tag and h3 in the closing tag don't match.

This is the end of part 1 of this article. If you want part 2, let me know in the comments. I will make sure to drop it