An Seo’s Intro to Web Dev, HTML, CSS and JavaScript

An SEO’s Intro to Web Dev
HTML, CSS and JavaScript

Troy Boileau | SEO & Inbound Marketing Consultant

For Powered by Search | January 2014

We’re in business because we believe that great brands need
both voice and visibility in order to connect people with what
matters.
A boutique, full-service digital marketing agency in Toronto,
Powered by Search is a PROFIT HOT 50-ranked agency that
delivers search engine optimization, pay per click advertising,
local search, social media marketing, and online reputation
management services.
Some of our clients...

Featured in...

A Brief Introduction
HTML Basics
Getting into CSS
What is JavaScript?

The Webosphere
A website is way (way) more complicated than it looks. As SEOs we need to
at least be aware of the moving parts so that we can handle any problems
that come up.
You’ll most commonly deal with these parts:
1. The CMS (Content Management System) like Wordpress
2. The Client Side or “Front-End” code, like HTML, CSS and JavaScript
3. The Server Side or “Back-End” code, like PHP
4. The Database, like MySQL or SQLServer
5. The Web Server, like Apache or Microsoft IIS
But don’t forget about these parts:
1. The Domain Name
2. The Domain Name System (DNS)
3. The Physical Server

The Webosphere
The CMS is a piece of software that lets you add, manage and display
content. You’d be surprised as to how complex these things can be. Most
websites run off of a CMS, even if it’s a “boutique” or custom CMS.
Client Side code gets interpreted by a web browser to show a website. You
can run this kind of code on your own computer without a web server or
database. Search engines and users can see every piece of raw client side
code if they want to. This presentation encompasses all of the basics of
Client Side code.
Server Side code interacts with the database to display client side code or to
do all sorts of neat programming tasks like send email or update the
database. Server Side code can’t be read by the browser or search engines.

The Webosphere
The Database is like an Excel table that you can intelligently manage values
in. For example, I might have an Employee Name and Employee Number
table. Using SQL, a database query language, I can ask my database for the
Employee Numbers for “Derek” and “Sarah” and it’ll return those numbers.
Server Side code makes great use of this; a CMS, for example, doesn’t use
static files for blog posts, it just stores them in the Database.
The Web Server puts everything together. When someone types a URL into
the browser, it handles the request and returns the right files. It can do
tricky things like only show files to specific IP addresses. It can also redirect
you from one page to another. The most common web server right now is
Apache, and SEOs are normally pretty comfortable with the HTACCESS file,
which lets us give simple commands to the Web Server without messing
around in its deeper code.

The Webosphere
The other bits of the process are the Domain Name, the DNS and the
Physical Server. These work together to show the actual files. If everything
else was the product, these three are the delivery process.
The first bit of the process is similar to how letter gets mailed. You rent a
Domain Name (poweredbysearch.com) from a Domain Registrar. Examples
of registrars are GoDaddy or Namecheap. This is similar to getting a
business name rather than just a tax number.
Your Physical Server is a computer somewhere that has an IP address.
People can reach that computer by typing in the right IP address
(74.125.239.119), but that gets confusing.
To connect the two you use the Domain Name System. It’s a network that
every computer knows exists. When you set up your Domain Name, you
also tell the DNS which IP address you want that name pointing to.

All so that we can look at cute pictures of puppies.

http://cutestpaw.com

The Webosphere
We don’t really mess around with this stuff every day, but you’re supposed
to be the “technical marketing guru” so it’s on you to know the difference
between Java and JavaScript, as well as being able to diagnose other searchrelated issues.
So to recap...
1. The CMS (Content Management System) like Wordpress
2. The Client Side or “Front-End” code, like HTML, CSS and JavaScript
3. The Server Side or “Back-End” code, like PHP
4. The Database, like MySQL or SQLServer
5. The Web Server, like Apache or Microsoft IIS
And...
1. The Domain Name
2. The Domain Name System (DNS)
3. The Physical Server

HTML Basics
What is HTML?
Everyone knows HTML as the universal web language. It stands for Hyper
Text Markup Language. The important bit of that is that it’s a “Mark Up”
language, similar to XML.
Mark up languages help software understand the importance of an element
on a page.
Think, for a moment, how your eyes interpret this slide.
1. What is the importance of “HTML Basics” to this content?
2. How about “What is HTML?”
3. How about the text below it?
You can understand each piece of content through various mental
processes, but computers can’t. So, we help them out by marking up each
piece of content. We do this by wrapping the elements in a tag.

<h1>HTML Basics</h1>
<h2>What is HTML?</h2
<p>Everyone knows HTML as the universal web language. It stands for
<em>Hyper Text Markup Language</em>. The important bit of that is that
it’s a “Mark Up” language, similar to XML.</p>
<p>Mark up languages help software understand the importance of an
element on a page.</p>
<p>Think, for a moment, how your eyes interpret this slide.</p>
<ol>
1. <li>What is the importance of “HTML Basics” to this content?</li>
2. <li>How about “What is HTML?”</li>
3. <li>How about the text below it?</li>
</ol>
<p>You can understand each piece of content through various mental
processes, but computers can’t. So, we help them out by marking up each
piece of content. We do this by wrapping the elements in a tag. </p>

HTML Basics
What is HTML?
Beyond marking up specific pieces elements, HTML also helps define an
overall structure.
For example, it’s useful for the browser to know that a paragraph <p> is part
of an article <article>
<article>
</article>

<p>This is the first paragraph in an article!</p>

You’ll frequently see lists, which are defined first as either Ordered Lists
<oL> or Unordered Lists <ul>, and List Items <li> which are the actual data
within lists.
<ol>
1. <li>Like this!</li>
</ol>

HTML Basics
What is HTML?
HTML also provides meta data that is only relevant to the browser.
One of the most important meta data tags to an SEO is the canonical tag,
which tells the browser that even though a web page can be reached from
3-4 different URLs, for example:
url.com/test
url.com/test?id=1
url.com/test#mypage
The version of the page that is canonical or standard is whatever exists in
the canonical tag. We set this tag, using HTML, like so:
<link rel="canonical" href=“http://www.url.com/test" />

HTML Basics
Hello World in HTML
<!doctype html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
The Doctype is the first declaration. This tells the browser what kind of
document it’s looking at and how it should be interpreted. The HTML5
doctype is simply “html,” but you’ll commonly see a doctype that looks like
this, though is no longer best practice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML Basics
Hello World in HTML
<!doctype html>
<html>
<head>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Web Developers and SEOs will commonly say “This needs to be in the head
tag” or “this needs to go right above the closing body tag.” These are the
two main sections of all HTML documents. Most meta data needs to be
loaded in the head tag, as well as anything that needs to be loaded on the
page before other content. To load something last, which we often do with
JavaScript, we put it right above the closing body tag.

HTML Basics
Hello World in HTML
<!doctype html>
<html>
<head>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
The Title tag is one of the HTML tags that has to be in the head tag. It’s also
one of the most important elements for SEO.
The Paragraph tag <p> is one of the most common tags in HTML. If you were
to run this short HTML document in your browser, the Paragraph tag would
be the only one that actually displays.

HTML Basics
Basic HTML Tags

1. <p></p> Paragraph tags are used to wrap... Paragraphs.
2. <div></div> This is one of the most common tags in HTML. It’s weakly
defined so web developers use it for almost everything, though there
are many better tags to use.
3. <em></em> The emphasis tag is usually used to show italics. Older code
uses <i></i>, for “italic,” but that is really bad practice now.
4. <strong></strong> Strong is synonymous with “bold,” and used to use
the <b> for bold tag. <b> is no longer used.
5. <img src=“/images/img.jpg” alt=“This is an apple” /> For your browser
to show an image you have to tell the file you’re in where the image file
exists (src). We include the “alt” tag to explain what the image is about.
6. <a href=“http://www.poweredbysearch.com”>Anchor Text</a> The
anchor tag creates a link. Href defines the URL, and it wraps the Anchor.
7. <ul></ul>, <ol><ol>, Bot UL and OL wrap list items. OL means Ordered
List and is usually counted, 1,2,3. UL means Unordered List and is shown
as a bulleted or otherwise unnumbered list.
8. <li></li> List Items are members of the lists mentioned above.

HTML Basics
HTML Attributes
Tags also have attributes. These help explain what the tag is about, or are
sometimes used as “hooks” for CSS or JavaScript to find and change those
specific attributes.
Here are some attributes we’ve seen already:
1. Href as in <a href=“”></a>... This tells the browser what URL the link
should point to.
2. Src as in <img src=“” />... This tells the browser which file to point to.
3. Alt as in <img src=“” alt=“” />... This tells the browser what alternative
meaning it can use to better understand the tag.
These are some of the most common attributes that can be added to tags.

HTML Basics
HTML Attributes
There are two other attributes that are extremely common. They’re
frequently used as hooks by JavaScript and CSS. For example, if I wanted to
make a paragraph blue I might say, “all paragraphs with THIS ATTRIBUTE will
be blue.” Both of these attributes mean nothing to search engines.
The two are:
1. Class, as in <p class=“byline”>by Troy</p>
2. ID, as in <p id=“company-address”>505 Consumers Road</p>
The only difference between ID and Class is that ids have to be unique,
while there can be duplicates of classes. So you could have five tags with
the attribute class=“byline”, but you can only have one tag with the
id=“company-address”.

HTML Case Study

My First Website

An Seo’s Intro to Web Dev, HTML, CSS and JavaScript

Getting Into CSS
CSS Basics
If you had a document just using HTML, no matter what tags you used it
would all look pretty bland. CSS makes everything look pretty.
On a high level, CSS lets you define property changes, like changing the font
size. CSS uses selectors to determine which elements on which to apply
those changes.
Here’s an example:
CSS:
p { font-size:18px; }

HTML:
<article>
<p>This Font</p>
<p>That Font</p>
<span>The Other</span>
</article>

Getting Into CSS
CSS Basics: Property Changes
Here are some property changes that CSS can affect:
• Modify the Font: Whether it’s the size, font family, whether it’s italic or
not, even deeper typography like kerning or line-height, CSS can do it.

•

Add Backgrounds and Images: Just as it sounds.

Getting Into CSS
CSS Basics: Property Changes
•

Position Items: By default every element has space it
takes up and space around it. Elements are also either
inline or block-level. There are other positioning
aspects as well, all of which CSS can change.

All You HAVE to Know is That

CSS Makes Things Pretty

What Is JavaScript?
JavaScript!
JavaScript (nothing to do with Java) adds dynamic functionality to a web
page.
For example, you can use JavaScript to trigger when a user clicks on a
paragraph, so that once the paragraph is clicked it also becomes highlighted
and a “share this” box appears with social icons.
We’ll go through a couple brief examples while ignoring all of the specifics
of the language since JavaScript has the least of all of these to do with SEO
excepting that sites should never load significant content using JavaScript.
But now this should make a lot of sense:
1. HTML makes a site understandable
2. CSS makes it pretty
3. And JavaScript makes it dynamic

No one actually uses JavaScript anymore; we
mostly use jQuery.

https://www.udemy.com/blog/jquery-vs-javascript/

Scripts can trigger whenever you want them to.
When some event occurs (time passed, click,
hover, scroll, typing, etc) or right away.

We can use JavaScript to ask the server for
information that the client’s browser doesn’t have
(This technology is called AJAX)

http://www.jquery4u.com/demos/ajax/

What Is JavaScript?
Where SEOs See JavaScript
Most frequently an SEO is going to see JavaScript in onClick events.
Sometimes we trigger these ourselves in the form of analytics event
tracking:

You might also see some otherwise legitimate sites linking out using fake
links, e.g.
Trying to trick people into providing their site value with nothing given in
return. You won’t be fooled.
And if you disable JavaScript and the page has nothing on it... That’s bad.

Get Out
....
<3

Stay in Touch
Twitter: @troyfawkes
Google+: google.com/+TroyBoileau
Email: troy@poweredbysearch.com
www.poweredbysearch.com
www.troyfawkes.com

An Seo’s Intro to Web Dev, HTML, CSS and JavaScript

Recommended

More Related Content

What's hot (20)

Viewers also liked (10)

Similar to An Seo’s Intro to Web Dev, HTML, CSS and JavaScript (20)

Recently uploaded (20)

An Seo’s Intro to Web Dev, HTML, CSS and JavaScript