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
- 12. Questions?
- 13. HTML Basics
- 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”.
- 24. Questions?
- 25. HTML Case Study My First Website
- 26. Questions?
- 27. Getting Into CSS
- 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
- 33. Questions?
- 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.
- 40. Questions?
- 41. Get Out .... <3 Stay in Touch Twitter: @troyfawkes Google+: google.com/+TroyBoileau Email: [email protected] www.poweredbysearch.com www.troyfawkes.com