SlideShare a Scribd company logo
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?
A Brief Introduction
https://webworksofkc.com/
A Brief Introduction
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
A Brief Introduction
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.
A Brief Introduction
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.
A Brief Introduction
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
A Brief Introduction
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
Questions?
HTML Basics
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>
<title>Hello World</title>
</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>
<title>Hello World</title>
</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”.
Questions?
HTML Case Study

My First Website
Questions?
Getting Into CSS
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
Questions?
What is JavaScript?
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.
Questions?
Get Out
....
<3

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

More Related Content

What's hot (20)

PPTX
Html
EPAM Systems
 
PDF
Html Tutorial
DenMas Hengky
 
PPT
Xhtml 2010
guest0f1e7f
 
PPTX
HTML, CSS and Java Scripts Basics
Sun Technlogies
 
KEY
HTML/CSS Lecture 1
Lee Lundrigan
 
PDF
Week 2-intro-html
Shawn Calvert
 
PPTX
Learn html Basics
McSoftsis
 
PPTX
Html css java script basics All about you need
Dipen Parmar
 
PDF
Intro to HTML and CSS - Class 2 Slides
Heather Rock
 
PDF
HTML Foundations, pt 2
Shawn Calvert
 
PPT
Web Development using HTML & CSS
Shashank Skills Academy
 
PPTX
HTML
Akash Varaiya
 
PDF
Basic html
Nicha Jutasirivongse
 
PDF
Web I - 02 - XHTML Introduction
Randy Connolly
 
PPT
Html basics
mcatahir947
 
PPTX
Html Workshop
vardanyan99
 
PPTX
HTML Basic, CSS Basic, JavaScript basic.
Beqa Chacha
 
PPTX
4. html css-java script-basics
Nikita Garg
 
PPT
HTML & CSS Workshop Notes
Pamela Fox
 
Html Tutorial
DenMas Hengky
 
Xhtml 2010
guest0f1e7f
 
HTML, CSS and Java Scripts Basics
Sun Technlogies
 
HTML/CSS Lecture 1
Lee Lundrigan
 
Week 2-intro-html
Shawn Calvert
 
Learn html Basics
McSoftsis
 
Html css java script basics All about you need
Dipen Parmar
 
Intro to HTML and CSS - Class 2 Slides
Heather Rock
 
HTML Foundations, pt 2
Shawn Calvert
 
Web Development using HTML & CSS
Shashank Skills Academy
 
Web I - 02 - XHTML Introduction
Randy Connolly
 
Html basics
mcatahir947
 
Html Workshop
vardanyan99
 
HTML Basic, CSS Basic, JavaScript basic.
Beqa Chacha
 
4. html css-java script-basics
Nikita Garg
 
HTML & CSS Workshop Notes
Pamela Fox
 

Viewers also liked (10)

PDF
BuzzStream Training
Troyfawkes
 
ODP
Introduction of Html/css/js
Knoldus Inc.
 
KEY
HTML CSS & Javascript
David Lindkvist
 
PPT
Html JavaScript and CSS
Radhe Krishna Rajan
 
PPTX
An Intro to HTML5 and CSS3
Dhruva Krishnan
 
PPTX
Responsive Web Design
Dhruva Krishnan
 
PDF
Intro to HTML5
Jussi Pohjolainen
 
PPT
Introduction to Java Scripting
fantasticdigitaltools
 
PDF
Excel Training for SEOs
Troyfawkes
 
PPTX
Introduction to HTML and CSS
Ferdous Mahmud Shaon
 
BuzzStream Training
Troyfawkes
 
Introduction of Html/css/js
Knoldus Inc.
 
HTML CSS & Javascript
David Lindkvist
 
Html JavaScript and CSS
Radhe Krishna Rajan
 
An Intro to HTML5 and CSS3
Dhruva Krishnan
 
Responsive Web Design
Dhruva Krishnan
 
Intro to HTML5
Jussi Pohjolainen
 
Introduction to Java Scripting
fantasticdigitaltools
 
Excel Training for SEOs
Troyfawkes
 
Introduction to HTML and CSS
Ferdous Mahmud Shaon
 
Ad

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

DOC
Internet programming notes
Durgadevi palani
 
PDF
IT8005 Electronic Commerces Notes UNIT 1
ArunsunaiComputer
 
PPTX
TOPIC 2 - HTML BASICS.pptx
TemitopeOsadare1
 
PDF
Lesson 8 Computer Creating your Website.pdf
AshleyJovelClavecill
 
PPTX
Web Designing
Sachidananda M H
 
PDF
"Innovative Web Design & Development Hub
kyereernest560
 
PDF
Let me design
Anurag Deb
 
PPTX
HTML.pptx
vikasmittal92
 
PPTX
INTRODUCTIONS OF HTML
SURYANARAYANBISWAL1
 
PPTX
Fundamental of Web Development Tutorials by PINFO Technologies.pptx
umoren
 
PDF
jackylopez.com - Virtual Assistant and Web Development
Jacky Lopez
 
PPTX
Website development courses
OSK IT SOLUTION
 
PPTX
Web Designing Training in Ambala ! BATRA COMPUTER CENTRE
jatin batra
 
PDF
The Factors For The Website
Julie May
 
PPT
How websites and search engines work
Brian Duffy
 
PPT
Xhtml validation
clicksbazaar
 
PDF
Iwt module 1
SANTOSH RATH
 
PPTX
Website development-osgl
priyanka sharma
 
PPT
Unit 8 ecommerce p1
IronCheese
 
Internet programming notes
Durgadevi palani
 
IT8005 Electronic Commerces Notes UNIT 1
ArunsunaiComputer
 
TOPIC 2 - HTML BASICS.pptx
TemitopeOsadare1
 
Lesson 8 Computer Creating your Website.pdf
AshleyJovelClavecill
 
Web Designing
Sachidananda M H
 
"Innovative Web Design & Development Hub
kyereernest560
 
Let me design
Anurag Deb
 
HTML.pptx
vikasmittal92
 
INTRODUCTIONS OF HTML
SURYANARAYANBISWAL1
 
Fundamental of Web Development Tutorials by PINFO Technologies.pptx
umoren
 
jackylopez.com - Virtual Assistant and Web Development
Jacky Lopez
 
Website development courses
OSK IT SOLUTION
 
Web Designing Training in Ambala ! BATRA COMPUTER CENTRE
jatin batra
 
The Factors For The Website
Julie May
 
How websites and search engines work
Brian Duffy
 
Xhtml validation
clicksbazaar
 
Iwt module 1
SANTOSH RATH
 
Website development-osgl
priyanka sharma
 
Unit 8 ecommerce p1
IronCheese
 
Ad

Recently uploaded (20)

PDF
The Growing Value and Application of FME & GenAI
Safe Software
 
PDF
Automating the Geo-Referencing of Historic Aerial Photography in Flanders
Safe Software
 
PDF
EIS-Webinar-Engineering-Retail-Infrastructure-06-16-2025.pdf
Earley Information Science
 
PPTX
MARTSIA: A Tool for Confidential Data Exchange via Public Blockchain - Pitch ...
Michele Kryston
 
PDF
Enhancing Environmental Monitoring with Real-Time Data Integration: Leveragin...
Safe Software
 
PDF
Why aren't you using FME Flow's CPU Time?
Safe Software
 
PPTX
𝙳𝚘𝚠𝚗𝚕𝚘𝚊𝚍—Wondershare Filmora Crack 14.0.7 + Key Download 2025
sebastian aliya
 
PPTX
New ThousandEyes Product Innovations: Cisco Live June 2025
ThousandEyes
 
PDF
“Scaling i.MX Applications Processors’ Native Edge AI with Discrete AI Accele...
Edge AI and Vision Alliance
 
PDF
Darley - FIRST Copenhagen Lightning Talk (2025-06-26) Epochalypse 2038 - Time...
treyka
 
PPTX
MARTSIA: A Tool for Confidential Data Exchange via Public Blockchain - Poster...
Michele Kryston
 
PDF
“MPU+: A Transformative Solution for Next-Gen AI at the Edge,” a Presentation...
Edge AI and Vision Alliance
 
PDF
My Journey from CAD to BIM: A True Underdog Story
Safe Software
 
PDF
Open Source Milvus Vector Database v 2.6
Zilliz
 
PDF
Java 25 and Beyond - A Roadmap of Innovations
Ana-Maria Mihalceanu
 
PDF
Hyderabad MuleSoft In-Person Meetup (June 21, 2025) Slides
Ravi Tamada
 
PPTX
01_Approach Cyber- DORA Incident Management.pptx
FinTech Belgium
 
PDF
LLM Search Readiness Audit - Dentsu x SEO Square - June 2025.pdf
Nick Samuel
 
PPTX
UserCon Belgium: Honey, VMware increased my bill
stijn40
 
PDF
From Chatbot to Destroyer of Endpoints - Can ChatGPT Automate EDR Bypasses (1...
Priyanka Aash
 
The Growing Value and Application of FME & GenAI
Safe Software
 
Automating the Geo-Referencing of Historic Aerial Photography in Flanders
Safe Software
 
EIS-Webinar-Engineering-Retail-Infrastructure-06-16-2025.pdf
Earley Information Science
 
MARTSIA: A Tool for Confidential Data Exchange via Public Blockchain - Pitch ...
Michele Kryston
 
Enhancing Environmental Monitoring with Real-Time Data Integration: Leveragin...
Safe Software
 
Why aren't you using FME Flow's CPU Time?
Safe Software
 
𝙳𝚘𝚠𝚗𝚕𝚘𝚊𝚍—Wondershare Filmora Crack 14.0.7 + Key Download 2025
sebastian aliya
 
New ThousandEyes Product Innovations: Cisco Live June 2025
ThousandEyes
 
“Scaling i.MX Applications Processors’ Native Edge AI with Discrete AI Accele...
Edge AI and Vision Alliance
 
Darley - FIRST Copenhagen Lightning Talk (2025-06-26) Epochalypse 2038 - Time...
treyka
 
MARTSIA: A Tool for Confidential Data Exchange via Public Blockchain - Poster...
Michele Kryston
 
“MPU+: A Transformative Solution for Next-Gen AI at the Edge,” a Presentation...
Edge AI and Vision Alliance
 
My Journey from CAD to BIM: A True Underdog Story
Safe Software
 
Open Source Milvus Vector Database v 2.6
Zilliz
 
Java 25 and Beyond - A Roadmap of Innovations
Ana-Maria Mihalceanu
 
Hyderabad MuleSoft In-Person Meetup (June 21, 2025) Slides
Ravi Tamada
 
01_Approach Cyber- DORA Incident Management.pptx
FinTech Belgium
 
LLM Search Readiness Audit - Dentsu x SEO Square - June 2025.pdf
Nick Samuel
 
UserCon Belgium: Honey, VMware increased my bill
stijn40
 
From Chatbot to Destroyer of Endpoints - Can ChatGPT Automate EDR Bypasses (1...
Priyanka Aash
 

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

  • 1. An SEO’s Intro to Web Dev HTML, CSS and JavaScript Troy Boileau | SEO & Inbound Marketing Consultant For Powered by Search | January 2014
  • 2. 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...
  • 3. A Brief Introduction HTML Basics Getting into CSS What is JavaScript?
  • 6. A Brief Introduction 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
  • 7. A Brief Introduction 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.
  • 8. A Brief Introduction 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.
  • 9. A Brief Introduction 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.
  • 10. All so that we can look at cute pictures of puppies. http://cutestpaw.com
  • 11. A Brief Introduction 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
  • 14. 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.
  • 15. <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>
  • 16. 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>
  • 17. 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" />
  • 18. 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">
  • 19. HTML Basics Hello World in HTML <!doctype html> <html> <head> <title>Hello World</title> </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.
  • 20. HTML Basics Hello World in HTML <!doctype html> <html> <head> <title>Hello World</title> </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.
  • 21. 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.
  • 22. 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.
  • 23. 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”.
  • 25. HTML Case Study My First Website
  • 29. 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>
  • 30. 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.
  • 31. 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.
  • 32. All You HAVE to Know is That CSS Makes Things Pretty
  • 35. 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
  • 36. No one actually uses JavaScript anymore; we mostly use jQuery. https://www.udemy.com/blog/jquery-vs-javascript/
  • 37. Scripts can trigger whenever you want them to. When some event occurs (time passed, click, hover, scroll, typing, etc) or right away.
  • 38. 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/
  • 39. 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.
  • 41. Get Out .... <3 Stay in Touch Twitter: @troyfawkes Google+: google.com/+TroyBoileau Email: troy@poweredbysearch.com www.poweredbysearch.com www.troyfawkes.com