An Introduction To HTML & CSS


It’s by no means been simpler to start out a web-based retailer. Because of platforms like Shopify, you should buy a theme, add your merchandise, and be promoting to your clients in a matter of hours! The barrier to entry is so low that just about anybody can do it.

Whereas it’s that straightforward to get began, it’s simply as straightforward to take that simplicity without any consideration. Ultimately, you’ll wish to add or change one thing in your retailer and also you’ll understand your theme doesn’t help it. Builders aren’t low-cost and the very last thing you wish to do is need to pay another person for one thing you possibly can have accomplished your self.

What if I instructed you that you possibly can spend a bit time upfront to be taught the fundamentals of how web sites work and also you’d save a while and cash down the street?

By the tip of this text, it’s best to know the fundamentals of HTML & CSS and know sufficient to start out tinkering in your individual retailer.

So take a couple of minutes to prepare and let’s get began!

What’s HTML & CSS?

HTML stands for Hypertext Markup Language. It’s one of many oldest and most necessary foundational languages of the net. It’s answerable for structuring and presenting the content material on this very web page!

CSS stands for Cascading Type Sheets. It’s answerable for offering the HTML it’s type and formatting.

Collectively, these are the required constructing blocks of any web site. On this article, I’m going to stroll you thru the fundamentals and present you how you can code and elegance your first webpage.

Since I’m an enormous fan of Invoice Murray (who isn’t), we’re going to create our personal shrine on the internet to Invoice.

First although, let’s dive deeper into HTML and CSS to actually get a well-rounded understanding of their energy and talent.

The Anatomy of a Web site

We will simply perceive how HTML and CSS work collectively by evaluating them to the structural components of a home.

Behind the partitions of each home lies a body answerable for its construction. Consider HTML like a home body. It’s answerable for the construction of an internet site.

Sticking with our home analogy, CSS is answerable for issues like paint colours, the size of the eating room, the colour of the wooden floors, and the form and elegance of the eating room desk.

Let’s take a look at some primary HTML markup and stroll by way of it line by line.

Doctype

The <!DOCTYPE html> tag helps the browser know that the doc kind we wish to work with is HTML.

Head

Contained in the <head> tag is the place we retailer all of the metadata of our doc. This knowledge contains issues just like the title, kinds (CSS), description, and extra. This knowledge isn’t exhibited to the end-user, however browsers use it to find out what the doc must be titled or what kinds it ought to use when it does show it to the end-user.

Another parts discovered within the <head> of an HTML web page might embrace writer info, the web page description, or a hyperlink to a picture used for the favicon (the little icon in a browser tab).

Favicon Example

Physique

The <physique> tag comprises all of the markup (code) for the web site. That is the one code that the end-user will see once they view our website.

The Instruments You Must Construct a Web site

To get began writing HTML you may assume that you simply want some fancy, costly software program, however you don’t. In actual fact, you have already got what you want.

For those who’re utilizing a PC, open up this system NotePad. In case you are on an Apple Mac, open up TextEdit.

Now that you’ve got your textual content enhancing program open, observe together with me whereas we broaden on the fundamental HTML markup above. Copy (Ctrl + C on Home windows / Cmd + C on Mac) and paste (Ctrl + p on Home windows / Cmd + P on Mac) the next code into your textual content editor.

<!DOCTYPE html>
<html>
<head>
<title>The title of your web page</title>
</head>
<physique>
<h1>Good day World!</h1>
<p>That is our first paragraph.</p>
</physique>
</html>

Save this file in your desktop and open it in your internet browser. You need to now see your code translated, or rendered by the browser and it ought to look one thing like this:

Code Rendering Example

The Heading factor (<h1>)

The <h1> tag is used whenever you wish to carry consideration and definition to sure textual content. On this occasion, we would like the textual content “Good day World!” to be bigger and extra outstanding than the following textual content.

Out of the field, HTML has six completely different heading tags you should utilize: h1, h2, h3, h4, h5, and h6.

HTML Heading Examples
The font measurement will get smaller each “step down” you’re taking; H1 would be the largest and H6 would be the smallest. By default, they’ll have some margin (or spacing round them) to separate them from different parts on the web page and to provide the consumer visible hierarchy.

Take a minute to experiment with altering the title, heading, and/or paragraph tags. When you make a change, put it aside, after which refresh your browser. Congratulations, you simply edited HTML for the primary time!

Seems boring although, proper?

Let’s add some type to our web page and be taught extra concerning the true energy of CSS.

With the intention to add our personal kinds to those HTML parts, we have to add a <type> tag contained in the <head> of our doc.

This tag wraps round all our CSS. Consider what’s contained in the <type> tag because the browser’s type information. 

Underneath the <title> tag on a brand new line, add a method tag like this:

<title>The title of your web page</title>

<type>

</type>

Contained in the type tag is the place we are able to enter all our declarations. A CSS declaration consists of a property adopted by a worth.

CSS Declaration

Let’s make the colour of our <h1> completely different from the remainder of our textual content as a result of it’s an important and we would like it to face out. Add the next between your <type> tags, save your file, and refresh your browser once more.

<type>
h1 { shade: blue; }
</type>

You need to now hopefully see one thing that appears like this! You’ll discover that our “Good day World!” textual content is now blue. Easy, proper?

CSS Modification to H-Tag

There, you’ve accomplished it! You’ve efficiently modified the type of an HTML factor utilizing CSS. Are we having enjoyable but?

Including photographs to our web page

There are various different parts you’ll be able to embrace in your web page, however one of the vital outstanding on any web site is the almighty picture. We will simply add a picture by together with the tag like so:

<img src=“https://www.fillmurray.com/400/500”>

Observe: For the sake of demonstration, I’m utilizing a picture placeholder service referred to as www.fillmurray.com. You should utilize a picture in your native laptop if you happen to desire that.

Alternate (Professional Tip) method of grabbing a picture from an internet site: Discover a picture on an internet site you’d like to make use of and right-click on it. Click on Copy Picture Deal with and the URL of that picture will likely be in your clipboard. Relying in your browser, the wording is likely to be barely completely different. I’m utilizing Google Chrome. I’m not recommending the overuse of hotlinking however for this demo it’s not an enormous deal.

How to Save an Image from a Website

Copy and paste this picture factor and place it underneath your paragraph tag so your full code block seems like mine:

<!DOCTYPE html>
<html>
  <head>
    <title>The title of your web page</title>
    <type>
      h1 { shade: blue;}
    </type>
  </head>
  <physique>
    <h1>Good day World!</h1>
    <p>That is our first paragraph.</p>
    <img src=https://www.fillmurray.com/400/500” alt=”picture of Invoice Murray”>
  </physique>
</html>

Save your file and reload your browser and it’s best to now see one thing like this:

How to Start Coding Your First Website

For those who have been paying consideration, you seen one other attribute on the <img> tag, the alt=”picture of Invoice Murray”. For the reason that browser deciphers code and can’t see the rendered output such as you and I, it wants some strategy to know the context of what it’s displaying.

By including an ALT tag (various textual content) to our picture, we are able to inform the browser what our picture’s material is about.

That is additionally crucial for website positioning (search engine marketing) and extra importantly, this textual content is learn aloud for blind customers utilizing a display reader.

However What About Hyperlinks?

No intro to HTML/CSS can be full with out masking hyperlinks! Whenever you’re constructing an internet site, you’re going to need the flexibility to hyperlink, whether or not that’s to exterior sources or to different inside pages inside your individual web site.

Let’s speak concerning the anchor factor. The true magic of an anchor factor is definitely its href attribute. Let’s exhibit the construction of an anchor tag by including a hyperlink to Invoice’s Wikipedia web page.

<a href=“www.google.com”>Learn his Wikipedia entry</a>

This code is telling the browser that when a consumer clicks on the textual content: “Learn his Wikipedia entry”, take them to www.google.com.

Let’s add this code proper underneath our heading factor so our code block now seems like this:

<!DOCTYPE html>
<html>
  <head>
    <title>The title of your web page</title>
    <type>
      h1 { shade: blue;}
    </type>
  </head>
  <physique>
    <h1>Good day World!</h1>
    <a href=“https://en.wikipedia.org/wiki/Bill_Murray”>Learn his Wikipedia entry</a>
    <p>That is our first paragraph.</p>
    <img src=“https://www.fillmurray.com/400/500” alt=“picture of Invoice Murray”>
  </physique>
</html>

Hit save and refresh the browser and hopefully, yours seems like mine.

Coding Basics

Taking it Throughout the End Line

I went forward and styled my little homage to Invoice Murray and right here is my ultimate end result. I’ll stroll by way of a number of the added kinds under.

 

 

Drumroll please…

 

 

The Basics of HTML and CSS

Now, you’ll be able to see that this isn’t something to write down dwelling about, however that’s by design. That is simply the tip of the iceberg relating to how this web page might look or be styled. I needed to maintain issues easy so that you perceive what every of the styling strategies under does.

Let’s bounce into the little CSS I had so as to add to get us this far.

Styling the Physique:

First, to the physique of the web page, I added:

physique {
  background-color: #eee;
  font-family: Helvetica, Arial, sans-serif;
  text-align: heart;
  margin: 25px;
}

background-color
I set the background shade of the web page to a really mild gray utilizing the hexadecimal shade worth #eee. You’ll be able to be taught extra about these and see some examples right here over at MOZ.

font-family
I needed to vary the font from the default Occasions New Roman browsers use. For this, I selected Helvetica as my first selection (if the consumer has that font put in on their laptop), Arial as my second selection (if the consumer doesn’t have Helvetica, it’s going to default to Arial), and as a ultimate backup, a primary sans serif font.

text-align
I selected to have all of the textual content on my web page center-align. There are a few different choices for values like left and proper, however I assumed for this it regarded finest centered.

margin
I added a bit margin to the physique of the doc to provide it some respiratory room.

Styling our picture:

Lastly, I styled Invoice’s lovely face, er, I imply the picture factor 🙂

img {
  border: 10px strong #41bcd6;
  box-shadow: 2px 5px 5px #999;
  padding: 10px;
  border-radius: 5px;
}

I didn’t do a lot however needed to provide Invoice’s photograph some presence on the web page.

border
I added a 10px border across the picture. The #41bcd6 is one other hexadecimal shade worth which renders a lightweight blue shade (a part of my secret subliminal Steve Zissou shade theme).

box-shadow
I needed to provide the picture a three-dimensional really feel so I added a lightweight shadow to it. The box-shadow property accepts pixel and shade values that dictate the size, blur, and shade of the shadow. To be taught extra concerning the box-shadow declaration, Moz breaks it down nicely for you right here.

padding
To make the picture look extra like an image body, I added 10px of padding between it and the border.

border-radius
Simply for instance one of many cooler talents of CSS, I made the corners of the picture rounded through the use of border-radius. After I began constructing web sites, nothing prefer it existed, and producing rounded corners on the internet was truly fairly difficult. We’ve come a good distance since then, and now it’s somewhat easy. It accepts a price like px or ems, and right here I selected simply to spherical it sufficient to note by setting the worth to 5px.

Conclusion

All through this text we labored collectively to be taught the fundamental anatomy of an internet site. We additionally discovered some easy HTML and CSS which, finally, changed into a fairly superb little one-page tribute to one of many all-time biggest actors of a era 🙂

In all seriousness although, I hope you have been capable of observe together with me and construct out your first primary web site. Now if Invoice Murray isn’t your favourite actor, I problem you to edit this code to showcase your favourite actor, band, or no matter you’d like.

If it’s worthwhile to reference this code at any time, come again and skim this text, or as a comfort, I’ve put it up on CodePen right here.

There are such a lot of enjoyable issues you are able to do with simply HTML + CSS. Listed here are just a few nice assets so that you can broaden your studying:

We’ve severely solely scratched the floor on this article so I encourage you to learn extra, take some on-line programs, and hold pushing your data!

Leave a comment
Stay up to date
Register now to get updates on promotions and coupons.

Shopping cart

×