HTML CSS
Structure Design
Client-side, browser organizes markup Client-side, browser visualizes design
Hyper Text Markup Language describes the various components of a web document. Cascading Style Sheets stylize the elements in a web document.

Web Documentary

File Naming & Extensions

Web Programming - Web Patterns

Tools to Know


HTML

<element>Content</element>


<br> <hr>

Empty tags do not require a closing tags.

HTML

Block elements - h1, h2..., div, p, ol, ul, pre, address, blockquote, form, table

Block level elements always start on a new line and take up the full width available.


Inline elements - strong, span, em, img

Inline elements do not start a new line and only take up as much width as necessary.

HTML

attributes -

<img src="photo.jpg" alt="landscape" />

comments -

<!-- My comment -->

HTML - DOM

DOM image

HTML Review - Lists - ul, ol, li

Lists are very popular


<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

HTML - hyperlink, table, forms

Anchor tag - a

<a href="link.html">Link</a>

<a href="http://www.link.html" target="_blank">Link</a>

HTML - HTML5

Newish syntax features of HTML5 include <video>, <audio> and <canvas> elements, as well as the integration of scalable vector graphics (SVG) content. These features are designed to more easily include multimedia and graphic content without the use of plugins.

Stable HTML5 was released in 2014 and HTML 5.1 2016, so use it.

HTML - Search Engine Optimization

SEO process of improving a websites' ranking in search engines.

HTML - meta tag

Use of meta tag to identify a page


<!DOCTYPE html> 
<html lang="en"> 
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <meta name="title" lang="en" content="Project Title" /> 
    <meta name="creator" lang="en" content="Your Name" /> 
    <meta name="subject" lang="en" content="Topic" />
    <meta name="description" lang="en" content="Description." /> 
    <meta name="keywords" content="keyword 1, keyword 2" /> 
    <meta name="viewport" content="user-scalable=no, width=device-width" /> 
  </head>

HTML - SEO

Page Rank

Google page rank determines your website's authority by the number of other websites that link to your website.

Check ranking:
Page Ranking Checker

The best way to increase your page rank is for other "popular" websites to link to your website.

HTML - SEO

Page Rank

Search engines pay close attention to the <title> tag as they categorize your website. Use this opportunity to think critically about its contents.

Search engines also use heading tags (h1 - h6) to determine what a page is about and what content is most important.

HTML - SEO

Page Rank

Content writers often bold, italicize, or emphasize a few important words in paragraph text to help search engines to determine which keywords are most relevant.

The number of required clicks to get to a page from the homepage. Pages that are available in one click are deemed more important than those that are nearly hidden and require more than 3 clicks to reach.

HTML - SEO

SEO Tools

Sources

Sources

[any material that should appear in print but not on the slide]