Published By Joshua Sandoval

Twitter Facebook Learn to Code: A Basics in HTML and CSS


Binary Code

Hey everybody, it's Joshua, and I'm here to give you a basics in my two most favourite and beloved programming languages, HTML (HyperText Markup Language) and CSS (Cascading Style Sheets)! Let's Begin…

(Part 1) HTML:

HTML Tag Reference

Since HTML is fundamental to learning CSS I suppose we're going to start with that first. Here's a basic HTML5 setup, I'll include a basic website setup .ZIP at the end of this tutorial with all the assets you will need for a one-page website.

Basic HTML setup:

<!DOCTYPE html>
<html lang="en-US">
<head>
  <title>My Website!</title>
</head>
<body>
  <!-- page body (this is what the user will see) -->
  <!-- By the way, this tag is called a "comment" -->
</body>
</html>

Now let's do an analysis of each line of code in that block.

  • Okay, line 1. Now first off let's talk about the DOCTYPE, this is standard in HTML but is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in. Note that the declaration is NOT case sensitive, but you should probably keep it as shown in the block above for readability purposes.

  • Okay, line 2. Now let's talk about the HTML html (starting) tag, basically this tag tells the browser that this is an HTML document and is the "root" and/or the container for all other HTML elements. However, in this instance there's something more interesting about it! Notice the lang="en-US"? That's what we call an attribute, some attributes are global and can be used on any tag, whereas others are tag specific, nonetheless, they all have the same syntax, just with different values on both sides of the equals sign (=), well… except for boolean attributes which don't require a value. Note that the attribute's value must be contained within quotes, and must be encoded. See list of potential attributes.

  • Okay, line 3. That's the (starting) head tag. The head tag contains all sorts of information for external websites and applications. We'll talk more extensively about that later.

  • Okay, line 4. This is the title of your webpage and is required in HTML. This will typically appear in the tab on the browsers user-interface. Don't forget to change it, because you might.

  • Okay, line 5. This is what we call a end tag, notice the different syntax of that of a starting tag.

  • Okay, line 6. This is the body, and this tag contains all the tangible content the user can see.

  • Okay, line 7 & 8. These are comments, they can be placed anywhere, and the do not effect the site visually, use them to make notes in your code.

  • Okay, line 9 & 10. These are also end tags, most tags format like this, but others like the "img" tag self close.

  • Okay, all lines? Notice that all the elements are tabbed in with 2 spaces? This is how you format HTML to keep your code clean, do this to every embedded tag (excluding html, head and body, because they're roots…). Also, every special character (common example: "&" is "&amp;") within HTML tags (or attributes) must be encoded. View HTML Entity Conversion Calculator.

Okay, now that we've got the fundamentals out of the way let's talk about…

Meta (and sometimes link) Tags:

Now, what are meta (and sometimes link) tags? Meta (and sometimes link) tags contain information about your HTML document, and can be used by browsers, search engines, or other web services. Which makes them quite powerful. Unfortunately there's no defined list of meta tags, since they can be defined by developers that have no part in the making of the HTML5 specification. Let's get into the various types! Oh yeah, and… Okay, like before, in these sections, to keep this simple, we're going to do an analysis of a bunch of blocks of code, this time being a group of meta (or link) tags. Okay, let's get into this and not waste any time!

Notice: I may be missing a few, however, the ones that I describe in this section are all the ones that I use… and that suffices me.

HTML Character Encoding

A special note before we continue: Everything inside HTML tags, HTML attributes or inside quotes must be encoded. Here are some assets to help with encoding.

URL Decoder/Encoder View HTML Entity Conversion Calculator. View official HTML character chart.

(Also I should note that Emojis are supported, but finding the proper character codes for them is very difficult.)

HTML Standard MetaData

These are all the "necessary" (because meta tags are not necessary, but ARE EXTREMELY USEFUL) meta tags that are pre-built in HTML that I use.

<meta charset="UTF-8" /> <meta name="author" content="My name" /> <meta name="description" content="This is your site description&hellip;" /> <meta name="keywords" content="My site, about, code" /> <meta name="application-name" content="My app name" /> <meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1.0" /> <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" /> <link rel="canonical" href="http://mywebsite.com/" />

My analysis:

  • Okay, line 1. This is the "charset" meta tag. Put this tag directly at top of the head tag, right after the title tag. This tag tells the browser what character encoding instructions to use. UTF-8 is the standard encoding instruction and contains the largest set of characters, so I suggest using that.

  • Okay, line 2. This is the "author" meta tag. Put your name (and if there are multiple authors separate with commas) in the content attribute value. Also, make sure to encode.

  • Okay, line 3. This is the "description" meta tag. This is your site/page description (obviously). Put your description in here, this tag is used by search engines, which makes it a top priority. Also, make sure to encode.

  • Okay, line 4. This is the "keywords" meta tag. Google no longer uses this, but I still recommend you keep it in the case that it ever needs to be used by other sites. Tags work just like hashtags (#) on social media, except that these don't have the "#" character in front of the tag and that each keyword is separated by a comma. Just remember not to repeat a tag.

  • Okay, line 5. This is the "application-name" meta tag. This meta tag is used to describe a name of your app, although it's okay to leave out, the browser will use the title instead. Only use this tag if you're making a webapp.

  • Okay, line 6. This is the "viewport" meta tag. This determines the size and scale of the viewport. What is the viewport? The viewport is everything visible within the page. This meta tag only effects mobile phones. What is being shown in the code block above is the best configuration for all devices. However, you should change width=device-width to something like width=980 if you intend to not to optimize for mobile… also shame on you for not optimising your site for mobile. Mozilla goes more in depth here: Read more about viewport.

  • Okay, line 7. This is the "shortcut icon" link tag. This link tag specifies a image (must be in .ico format) for the little logo in the tab of your browser. Change the "href" value with your specific .ico image. View image to .ico converter. I suggest the image size 96x96 pixels, it's plenty big for what it's used for.

  • Okay, line 8. This is the "canonical" link tag. This defines a preferred absolute url for search engines.
Microsoft and Apple

Okay, like before, to keep this simple, we're going to do an analysis of a block of code, this time being a group of Apple/Microsoft specific meta tags.

By the way, there are more Microsoft meta tags than stated below, but barely anyone uses them. If you want to learn more about these tags click the link below.

Pinned site metadata reference
<!-- Microsoft --> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="msapplication-tap-highlight" content="no" /> <meta name="msapplication-config" content="./browserconfig.xml" /> <!-- Apple --> <meta name="apple-mobile-web-app-capable" content="no" /> <meta name="apple-mobile-web-app-status-bar-style" content="default" /> <meta name="format-detection" content="telephone=yes" /> <link rel="apple-touch-icon-precomposed" href="./icon.png" />

My analysis:

  • Okay, line 1. Let's start with the Microsoft specific tags!
  • Okay, line 2. This is the "X-UA-Compatible" meta tag. Put this tag directly at top of the "head" tag, right after the "title" and "meta charset" tags. This tag is used for specifying legacy document modes in Internet Explorer. This tag can be used in a interesting trick, which I've talked about on the site: Testing Legacy IE.

  • Okay, line 3. This is the "msapplication-tap-highlight" meta tag. This is the only way to disable tap highlight on Windows (Phone) 8. iPhone/iOS/WebKit has a more convenient way to do the same thing via the CSS property: "-webkit-tap-highlight-color", read about that here: Removing touch highlights on smartphones.

  • Okay, line 4. This is the "msapplication-config" meta tag. This is used to reference a separate "browser configuration file". Coming off Microsoft's Website: Browser configuration files (also known as browserconfig) can be used to define pinned site customizations, such as tile backgrounds, badge updates, and tile notifications. You can actually specify the basics of pinned site customizations without a separate document using Microsoft's generator, but I recommend the external method so that you have a one site-wide schema file for live tiles, instead of specifing for each page. You better read up on the XML specification, and remember that at the end of this tutorial I will be adding a minimalistic setup .ZIP that contains all the presets you will need.

  • Okay, line 5. Let's end with the Apple specific tags!
  • Okay, line 6. This is the "apple-mobile-web-app-capable" meta tag. This sets whether a web application runs in full-screen mode. The default behavior is to use Safari to display web content. Don't set this to "yes" unless you're making a webapp, the main reason being is that any external links will cause the full-screen app to open said link in Safari.

  • Okay, line 7. This is the "apple-mobile-web-app-status-bar-style" meta tag. This changes the color of the status bar in full-screen mode. It doesn't do anything in normal Safari. The content values are "default", "black-translucent" and "black". More info here: Supported Meta Tags.

  • Okay, line 8. This is the "format-detection" meta tag. This tells devices like the iPhone to format phone numbers for calling on tap. I highly suggest keeping this enabled, as not to limit functionality.

  • Okay, line 9. This is the "apple-touch-icon-precomposed" link tag. This specifies an image for the iOS/Android homescreen when the user adds it to there. Windows has this via browserconfig files (or four separate meta tags).
Facebook Cards / OpenGraph Standard & Twitter Cards

Now, Facebook Cards / OpenGraph Standard and Twitter Cards are pretty complex, so I'm just going to link to the specifications for these two… and before you call me lazy, I tried writing this section multiple times, and it never sufficiently sufficed me.

OpenGraph specification by FaceBook Cards specification by Twitter
Importing Scripts and Stylesheets

Importing stylesheets or scripts is really simple, so let's get into it!

Importing (external and internal) CSS Styles:

Importing stylesheets is really simple, just add this into your head tag, and change the "href" value.

<link rel="stylesheet" type="text/css" href="./mystylesheet.css" />

You can create stylesheets within your html with the style tag, but… just don't, it's a bad practice.

Importing (external and internal) JavaScript:

Importing JavaScript scripts is really simple, just add this into your head tag, and change the "src" value.

<script src="./myscript.js"></script>

If the script is really small, import like this:

<script> function() JavaScriptIsFun() { // TAB IN EVERYTHING and USE ALIGNED BRACES. // THIS MAKES EVERYTHING more readable and CODE EASIER TO TRANSPORT FROM PLACE TO PLACE. } </script>
Putting it all together:

So now that we've got everything basic out of the way, let's put it all together into a preset document! (You'll have to change the values of course!)

<!DOCTYPE html> <html lang="en-US"> <head> <title>My Website!</title> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!-- ^ These tags must be placed at the top! ^ -->
<!-- Standard HTML meta tags --> <meta name="author" content="My name" /> <meta name="description" content="This is your site description&hellip;" /> <meta name="keywords" content="My site, about, code" /> <meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1.0" /> <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" /> <link rel="canonical" href="http://mywebsite.com/" />
<!-- Microsoft --> <meta name="msapplication-tap-highlight" content="no" /> <meta name="msapplication-config" content="./browserconfig.xml" />
<!-- Apple --> <meta name="apple-mobile-web-app-capable" content="no" /> <meta name="apple-mobile-web-app-status-bar-style" content="default" /> <link rel="apple-touch-icon-precomposed" href="./icon.png" />
<!-- Facebook Cards / OpenGraph Standard --> <meta property="og:url" content="http://mywebsite.com/" /> <meta property="og:type" content="website" /> <meta property="og:title" content="My Website!" /> <meta property="og:description" content="This is your site description&hellip;" /> <meta property="og:image" content="http://mywebsite.com/opengraphimage.jpg" />
<!-- Twitter Cards --> <meta name="twitter:card" content="summary" /> <meta name="twitter:description" content="This is your site description&hellip;" /> <meta name="twitter:title" content="My Website!" /> <meta name="twitter:site" content="@myAccount" /> <meta name="twitter:image" content="http://mywebsite.com/twitterimage.jpg" /> </head> <body> <h1>My Website</h1> <h2>By my name</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </body> </html>

And that's it! Now, I know that was long… but it had to be in order to cover the basics! On to Part 2, Basics on CSS!

(Part 2) CSS:

Now that we've got the HTML part of the tutorial out of the way, let's talk CSS! Luckily, this part will probably be quite short as CSS may have the easiest programming syntax ever conceived… that syntax being…

selector { property: value; }

…This is the basic CSS syntax. We start with a selector, followed by a opening bracket ({), followed by your list of properties (with corresponding value), and then finally followed by a closing bracket (})… Also, notice how everything is tabbed in and how the braces are aligned (and not the forbidden K&R style)? This is proper coding etiquette, and is the best way to make your CSS readable, and easy to edit. Also note the single space between the property and the selector, I often am too lazy to include this, as it's not crucial, but you probably should include it.

Let's continue on with the types of selectors in CSS! In CSS we have a huge range of CSS selectors, so let's start simple with the ones that directly represent their corresponding HTML tags, being the element selector, a representative of any HTML tag in CSS. Now in HTML we have a giant list of tags so we're going to just generalise and call our tag "element" (because this is the "element" selector).

Element selector:

element { property: value; }

As stated before, this selector "selects" the written element. However, in our case, it isn't very useful, as there is no "element" tag in HTML. On to the rest of the selectors!

All elements selector:

* { property: value; }

This is the all elements selector, this selector will select all and any tags… it can be pretty useful when used in conjunction with other selectors, but we'll get to that later…

ID selector:

#ID { property: value; }

This is the ID selector, this selects a SINGLE HTML TAG with the corresponding ID attribute. Note that there can be only one ID with a particular name on a single HTML document, and that the ID cannot start with a number, or a hyphen followed by a number. Also note that when naming ID's they don't have to be capitalised, I just did that because aesthetics… Camel-Case with an initial Capital Letter is the best CSS naming strategy (in most cases).

Class selector:

.class { property: value; }

This is the Class selector, this selects a single or multiple HTML tag(s) with the corresponding Class attribute. Note that the Class cannot start with a number, or a hyphen followed by a number. Also note that when naming classes' they don't have to be lowercased, I just did that because aesthetics… Camel-Case with an initial Capital Letter is still the best CSS naming strategy (in most cases).

Attribute selector:

[attribute], [attribute="value"], [attribute~="value"], [attribute|="value"], [attribute^="value"], [attribute$="value"], [attribute*="value"] { property: value; }

This is the attribute selector, attribute selectors select any HTML element with the corresponding attribute. All have the same basic syntax as you can tell, but do different things, click the link below to learn more, as we simply cannot cover all of the selectors here on the site.

CSS Attribute Selectors
Pseudo Classes and Elements:

:pseudo-class { property: value; }
::pseudo-element { property: value; }

These are Pseudo Classes and Elements. Pseudo classes are used to define a special state of an element, whereas pseudo elements are used, well… mostly the same, but 90% of the time effect the DOM (Document Object Model / HTML Document). Here's a list of all Pseudo Classes and Elements, and what they do.

Pseudo Classes Selectors Pseudo Elements Selectors
Selecting Child & Proceeding elements / Grouping Selectors:

Now that we've described all the core-CSS-selectors, let's talk about how to group selectors together and select child elements. Let's start with grouping selectors!

How to group selectors:

element, element2, element3 { property: value; }

As you can tell, grouping selectors is quite easy… you simply add a comma (",") after each line of selectors! To further clarify, it is not after each selector, but instead after every line of selectors.

How to select child & proceeding elements:

element elementChild, element > elementChild { property: value; }
element + proceedingElement, element ~ proceedingElement { property: value; }

Okay, analyzation time!

  • Okay, line 1. This type of selector selects every single child element specified of the parent element.
  • Okay, line 2. Unlike the last, this type of selector selects all direct-descendent child elements of the parent element.

  • Okay, line 7. This type of selector selects the element directly proceeding the specified tag before it.
  • Okay line 8. Unlike the last, this selector selects every tag proceeding the specified tag before it.
CSS Properties

Now, there are a ton of properties in CSS, and I've already told you the appropriate syntax, that being: property: value; so here is the CSS Almanac by Chris Coyier. This contains most (if not all) definitions of each CSS property.

Okay, this is not all CSS has to offer, but it is the basics, and is all I intend to tell you at this particular moment.

(Part 3) Putting it all Together!

Now, in the first part we made a basic HTML document. Let's use CSS to style it!

Sample HTML5 Document:

<!DOCTYPE html>
<html lang="en-US">
<head>
  <title>My Website!</title>
  <link rel="stylesheet" type="text/css" href="./mystyle.css" />   <!-- Omitting Meta Tags to shorten code&hellip; -->
</head>
<body>
  <h1>My Website</h1>
  <h2>By my name</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet accumsan sem, molestie aliquet quam vehicula non. Integer ornare, erat ac faucibus vestibulum, lorem erat vehicula enim, eu ultrices diam leo vulputate ligula. Etiam tristique quam neque, vel viverra ante tincidunt sit amet. Maecenas a tristique enim. Quisque blandit bibendum ante ut elementum. Nullam fringilla, tellus non pulvinar placerat, sapien tortor semper purus, ut hendrerit dolor diam ac odio. Fusce consectetur nibh hendrerit turpis auctor, id iaculis quam finibus. Donec aliquet, ante in mattis ornare, nisl lacus lobortis nibh, in luctus dolor enim vitae augue. Pellentesque scelerisque scelerisque lacus nec consequat.</p>
</body>
</html>

Sample CSS Document:

html { position: absolute; top: 0px; right: 0px; bottom: auto; left: 0px; display: block; width: 100%; height: auto; min-height: 100%; background-color: #323232; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-size: 16px; overflow: visible; padding: 8px; }
body { position: static; display: block; width: auto; height: 100%; min-height: 100%; line-height: 1.8; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background-color: #FFFFFF; -webkit-font-smoothing: antialiased; -webkit-touch-callout: default; -webkit-tap-highlight-color: initial; -webkit-text-size-adjust: none; font-size: 1em; font-family: -apple-system, BlinkMacSystemFont, Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 400; cursor: auto; overflow-x: auto; overflow-y: auto; padding: 8px 16px; margin: auto; }
body h1 { display: block; font-size: 2.4em; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font-weight: 300; }
body h2 { display: block; font-size: 1.5em; margin-top: 0em; margin-right: 0px; margin-bottom: 0em; margin-left: 0px; font-weight: 300; }
body p { display: block; margin-top: 1em; margin-right: 0px; margin-bottom: 1em; margin-left: 0px; }

Which Produces:

Obviously this is the most optimal setup, but it works! Thanks for reading! Remember to share this gift of learning!

(Update: Part 4?) Website.ZIP!

Where's the Website.ZIP?! Well, basically, every web server setup requires different files to work, making a single website.ZIP difficult! But I will release a different setup in the future (hopefully) for each type of web server once I learn more about the various types!