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
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

Html
HtmlHtml
Html Tutorial
Html Tutorial Html Tutorial
Html Tutorial
DenMas Hengky
 
Intr To Html & Xhtml
Intr To Html & XhtmlIntr To Html & Xhtml
Xhtml 2010
Xhtml 2010Xhtml 2010
Xhtml 2010
guest0f1e7f
 
HTML, CSS and Java Scripts Basics
HTML, CSS and Java Scripts BasicsHTML, CSS and Java Scripts Basics
HTML, CSS and Java Scripts Basics
Sun Technlogies
 
HTML/CSS Lecture 1
HTML/CSS Lecture 1HTML/CSS Lecture 1
HTML/CSS Lecture 1
Lee Lundrigan
 
Week 2-intro-html
Week 2-intro-htmlWeek 2-intro-html
Week 2-intro-html
Shawn Calvert
 
Learn html Basics
Learn html BasicsLearn html Basics
Learn html Basics
McSoftsis
 
Html css java script basics All about you need
Html css java script basics All about you needHtml css java script basics All about you need
Html css java script basics All about you need
Dipen Parmar
 
Intro to HTML and CSS - Class 2 Slides
Intro to HTML and CSS - Class 2 SlidesIntro to HTML and CSS - Class 2 Slides
Intro to HTML and CSS - Class 2 Slides
Heather Rock
 
HTML Foundations, pt 2
HTML Foundations, pt 2HTML Foundations, pt 2
HTML Foundations, pt 2
Shawn Calvert
 
Web Development using HTML & CSS
Web Development using HTML & CSSWeb Development using HTML & CSS
Web Development using HTML & CSS
Brainware Consultancy Pvt Ltd
 
HTML
HTMLHTML
Basic html
Basic htmlBasic html
Web I - 02 - XHTML Introduction
Web I - 02 - XHTML IntroductionWeb I - 02 - XHTML Introduction
Web I - 02 - XHTML Introduction
Randy Connolly
 
Html basics
Html basicsHtml basics
Html basics
mcatahir947
 
Html Workshop
Html WorkshopHtml Workshop
Html Workshop
vardanyan99
 
HTML Basic, CSS Basic, JavaScript basic.
HTML Basic, CSS Basic, JavaScript basic.HTML Basic, CSS Basic, JavaScript basic.
HTML Basic, CSS Basic, JavaScript basic.
Beqa Chacha
 
4. html css-java script-basics
4. html css-java script-basics4. html css-java script-basics
4. html css-java script-basics
Nikita Garg
 
HTML & CSS Workshop Notes
HTML & CSS Workshop NotesHTML & CSS Workshop Notes
HTML & CSS Workshop Notes
Pamela Fox
 

What's hot (20)

Html
HtmlHtml
Html
 
Html Tutorial
Html Tutorial Html Tutorial
Html Tutorial
 
Intr To Html & Xhtml
Intr To Html & XhtmlIntr To Html & Xhtml
Intr To Html & Xhtml
 
Xhtml 2010
Xhtml 2010Xhtml 2010
Xhtml 2010
 
HTML, CSS and Java Scripts Basics
HTML, CSS and Java Scripts BasicsHTML, CSS and Java Scripts Basics
HTML, CSS and Java Scripts Basics
 
HTML/CSS Lecture 1
HTML/CSS Lecture 1HTML/CSS Lecture 1
HTML/CSS Lecture 1
 
Week 2-intro-html
Week 2-intro-htmlWeek 2-intro-html
Week 2-intro-html
 
Learn html Basics
Learn html BasicsLearn html Basics
Learn html Basics
 
Html css java script basics All about you need
Html css java script basics All about you needHtml css java script basics All about you need
Html css java script basics All about you need
 
Intro to HTML and CSS - Class 2 Slides
Intro to HTML and CSS - Class 2 SlidesIntro to HTML and CSS - Class 2 Slides
Intro to HTML and CSS - Class 2 Slides
 
HTML Foundations, pt 2
HTML Foundations, pt 2HTML Foundations, pt 2
HTML Foundations, pt 2
 
Web Development using HTML & CSS
Web Development using HTML & CSSWeb Development using HTML & CSS
Web Development using HTML & CSS
 
HTML
HTMLHTML
HTML
 
Basic html
Basic htmlBasic html
Basic html
 
Web I - 02 - XHTML Introduction
Web I - 02 - XHTML IntroductionWeb I - 02 - XHTML Introduction
Web I - 02 - XHTML Introduction
 
Html basics
Html basicsHtml basics
Html basics
 
Html Workshop
Html WorkshopHtml Workshop
Html Workshop
 
HTML Basic, CSS Basic, JavaScript basic.
HTML Basic, CSS Basic, JavaScript basic.HTML Basic, CSS Basic, JavaScript basic.
HTML Basic, CSS Basic, JavaScript basic.
 
4. html css-java script-basics
4. html css-java script-basics4. html css-java script-basics
4. html css-java script-basics
 
HTML & CSS Workshop Notes
HTML & CSS Workshop NotesHTML & CSS Workshop Notes
HTML & CSS Workshop Notes
 

Viewers also liked

BuzzStream Training
BuzzStream TrainingBuzzStream Training
BuzzStream Training
Troyfawkes
 
Introduction of Html/css/js
Introduction of Html/css/jsIntroduction of Html/css/js
Introduction of Html/css/js
Knoldus Inc.
 
HTML CSS & Javascript
HTML CSS & JavascriptHTML CSS & Javascript
HTML CSS & Javascript
David Lindkvist
 
Html JavaScript and CSS
Html JavaScript and CSSHtml JavaScript and CSS
Html JavaScript and CSS
Radhe Krishna Rajan
 
An Intro to HTML5 and CSS3
An Intro to HTML5 and CSS3An Intro to HTML5 and CSS3
An Intro to HTML5 and CSS3
Dhruva Krishnan
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
Dhruva Krishnan
 
Intro to HTML5
Intro to HTML5Intro to HTML5
Intro to HTML5
Jussi Pohjolainen
 
Introduction to Java Scripting
Introduction to Java ScriptingIntroduction to Java Scripting
Introduction to Java Scripting
fantasticdigitaltools
 
Excel Training for SEOs
Excel Training for SEOsExcel Training for SEOs
Excel Training for SEOs
Troyfawkes
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
Ferdous Mahmud Shaon
 

Viewers also liked (10)

BuzzStream Training
BuzzStream TrainingBuzzStream Training
BuzzStream Training
 
Introduction of Html/css/js
Introduction of Html/css/jsIntroduction of Html/css/js
Introduction of Html/css/js
 
HTML CSS & Javascript
HTML CSS & JavascriptHTML CSS & Javascript
HTML CSS & Javascript
 
Html JavaScript and CSS
Html JavaScript and CSSHtml JavaScript and CSS
Html JavaScript and CSS
 
An Intro to HTML5 and CSS3
An Intro to HTML5 and CSS3An Intro to HTML5 and CSS3
An Intro to HTML5 and CSS3
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Intro to HTML5
Intro to HTML5Intro to HTML5
Intro to HTML5
 
Introduction to Java Scripting
Introduction to Java ScriptingIntroduction to Java Scripting
Introduction to Java Scripting
 
Excel Training for SEOs
Excel Training for SEOsExcel Training for SEOs
Excel Training for SEOs
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
 

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

Internet programming notes
Internet programming notesInternet programming notes
Internet programming notes
Durgadevi palani
 
IT8005 Electronic Commerces Notes UNIT 1
IT8005 Electronic Commerces Notes UNIT 1IT8005 Electronic Commerces Notes UNIT 1
IT8005 Electronic Commerces Notes UNIT 1
ArunsunaiComputer
 
TOPIC 2 - HTML BASICS.pptx
TOPIC 2 - HTML BASICS.pptxTOPIC 2 - HTML BASICS.pptx
TOPIC 2 - HTML BASICS.pptx
TemitopeOsadare1
 
Day1
Day1Day1
Lesson 8 Computer Creating your Website.pdf
Lesson 8 Computer Creating your Website.pdfLesson 8 Computer Creating your Website.pdf
Lesson 8 Computer Creating your Website.pdf
AshleyJovelClavecill
 
Web Designing
Web Designing Web Designing
Web Designing
Sachidananda M H
 
Let me design
Let me designLet me design
Let me design
Anurag Deb
 
HTML.pptx
HTML.pptxHTML.pptx
HTML.pptx
vikasmittal92
 
INTRODUCTIONS OF HTML
INTRODUCTIONS OF HTMLINTRODUCTIONS OF HTML
INTRODUCTIONS OF HTML
SURYANARAYANBISWAL1
 
jackylopez.com - Virtual Assistant and Web Development
jackylopez.com - Virtual Assistant and Web Developmentjackylopez.com - Virtual Assistant and Web Development
jackylopez.com - Virtual Assistant and Web Development
Jacky Lopez
 
Website development courses
Website development coursesWebsite development courses
Website development courses
OSK IT SOLUTION
 
Web Designing Training in Ambala ! BATRA COMPUTER CENTRE
Web Designing Training in Ambala ! BATRA COMPUTER CENTREWeb Designing Training in Ambala ! BATRA COMPUTER CENTRE
Web Designing Training in Ambala ! BATRA COMPUTER CENTRE
jatin batra
 
The Factors For The Website
The Factors For The WebsiteThe Factors For The Website
The Factors For The Website
Julie May
 
How websites and search engines work
How websites and search engines workHow websites and search engines work
How websites and search engines work
Brian Duffy
 
Xhtml validation
Xhtml validationXhtml validation
Xhtml validation
clicksbazaar
 
Iwt module 1
Iwt  module 1Iwt  module 1
Iwt module 1
SANTOSH RATH
 
Website development-osgl
Website development-osglWebsite development-osgl
Website development-osgl
priyanka sharma
 
Unit 8 ecommerce p1
Unit 8   ecommerce p1Unit 8   ecommerce p1
Unit 8 ecommerce p1
IronCheese
 
Rails Girls - Introduction to HTML & CSS
Rails Girls - Introduction to HTML & CSSRails Girls - Introduction to HTML & CSS
Rails Girls - Introduction to HTML & CSS
Timo Herttua
 
Importance of HTML
Importance of HTMLImportance of HTML

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

Internet programming notes
Internet programming notesInternet programming notes
Internet programming notes
 
IT8005 Electronic Commerces Notes UNIT 1
IT8005 Electronic Commerces Notes UNIT 1IT8005 Electronic Commerces Notes UNIT 1
IT8005 Electronic Commerces Notes UNIT 1
 
TOPIC 2 - HTML BASICS.pptx
TOPIC 2 - HTML BASICS.pptxTOPIC 2 - HTML BASICS.pptx
TOPIC 2 - HTML BASICS.pptx
 
Day1
Day1Day1
Day1
 
Lesson 8 Computer Creating your Website.pdf
Lesson 8 Computer Creating your Website.pdfLesson 8 Computer Creating your Website.pdf
Lesson 8 Computer Creating your Website.pdf
 
Web Designing
Web Designing Web Designing
Web Designing
 
Let me design
Let me designLet me design
Let me design
 
HTML.pptx
HTML.pptxHTML.pptx
HTML.pptx
 
INTRODUCTIONS OF HTML
INTRODUCTIONS OF HTMLINTRODUCTIONS OF HTML
INTRODUCTIONS OF HTML
 
jackylopez.com - Virtual Assistant and Web Development
jackylopez.com - Virtual Assistant and Web Developmentjackylopez.com - Virtual Assistant and Web Development
jackylopez.com - Virtual Assistant and Web Development
 
Website development courses
Website development coursesWebsite development courses
Website development courses
 
Web Designing Training in Ambala ! BATRA COMPUTER CENTRE
Web Designing Training in Ambala ! BATRA COMPUTER CENTREWeb Designing Training in Ambala ! BATRA COMPUTER CENTRE
Web Designing Training in Ambala ! BATRA COMPUTER CENTRE
 
The Factors For The Website
The Factors For The WebsiteThe Factors For The Website
The Factors For The Website
 
How websites and search engines work
How websites and search engines workHow websites and search engines work
How websites and search engines work
 
Xhtml validation
Xhtml validationXhtml validation
Xhtml validation
 
Iwt module 1
Iwt  module 1Iwt  module 1
Iwt module 1
 
Website development-osgl
Website development-osglWebsite development-osgl
Website development-osgl
 
Unit 8 ecommerce p1
Unit 8   ecommerce p1Unit 8   ecommerce p1
Unit 8 ecommerce p1
 
Rails Girls - Introduction to HTML & CSS
Rails Girls - Introduction to HTML & CSSRails Girls - Introduction to HTML & CSS
Rails Girls - Introduction to HTML & CSS
 
Importance of HTML
Importance of HTMLImportance of HTML
Importance of HTML
 

Recently uploaded

Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
Zilliz
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
Brandon Minnick, MBA
 
How to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For FlutterHow to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For Flutter
Daiki Mogmet Ito
 
Things to Consider When Choosing a Website Developer for your Website | FODUU
Things to Consider When Choosing a Website Developer for your Website | FODUUThings to Consider When Choosing a Website Developer for your Website | FODUU
Things to Consider When Choosing a Website Developer for your Website | FODUU
FODUU
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
Safe Software
 
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial IntelligenceAI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
IndexBug
 
CAKE: Sharing Slices of Confidential Data on Blockchain
CAKE: Sharing Slices of Confidential Data on BlockchainCAKE: Sharing Slices of Confidential Data on Blockchain
CAKE: Sharing Slices of Confidential Data on Blockchain
Claudio Di Ciccio
 
Mind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AIMind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AI
Kumud Singh
 
Building Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and MilvusBuilding Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and Milvus
Zilliz
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
Ivanti
 
Mariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceXMariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceX
Mariano Tinti
 
GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracyGraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
Tomaz Bratanic
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
名前 です男
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
Octavian Nadolu
 
Microsoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdfMicrosoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdf
Uni Systems S.M.S.A.
 
How to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptxHow to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptx
danishmna97
 
Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
Zilliz
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Tosin Akinosho
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
shyamraj55
 

Recently uploaded (20)

Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
 
How to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For FlutterHow to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For Flutter
 
Things to Consider When Choosing a Website Developer for your Website | FODUU
Things to Consider When Choosing a Website Developer for your Website | FODUUThings to Consider When Choosing a Website Developer for your Website | FODUU
Things to Consider When Choosing a Website Developer for your Website | FODUU
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
 
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial IntelligenceAI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
 
CAKE: Sharing Slices of Confidential Data on Blockchain
CAKE: Sharing Slices of Confidential Data on BlockchainCAKE: Sharing Slices of Confidential Data on Blockchain
CAKE: Sharing Slices of Confidential Data on Blockchain
 
Mind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AIMind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AI
 
Building Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and MilvusBuilding Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and Milvus
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
 
Mariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceXMariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceX
 
GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracyGraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
 
Microsoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdfMicrosoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdf
 
How to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptxHow to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptx
 
Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
 

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
  • 28.
  • 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