Intro to Webs

HTML/CSS, JavaScript, and PHP: Everything you need

to get started with web design and development

by Ben Centra

Before we get started...

"I already know HTML programming..."
"JavaScript? But I saw that video..."
"PHP is 'a fractal of bad design...'"
"Web dev is the worst..."

Why Web Dev?

Big Audience on a Common Platform
Plenty of Jobs, Decent Pay
Large Developer Community

HTML

HyperText Markup Language
NOT a programming language; just markup
Spec maintained by W3C
Current Version: HTML5*

*"HTML5" as a Technology = HTML5, CSS3, new JavaScript APIs

<!DOCTYPE>

Not HTML; tells browser the version of HTML being used
Must be declared before the first <html> tag
HTML5:
```
 <!DOCTYPE HTML>
```

XHTML 1.0:

 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

Page Setup

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <!-- Stylesheets and scripts go here -->
</head>
<body>
    <h1>Page Heading</h1>
    <p>Lorem ipsum dolor sit amet and the rest</p>
    <!-- More body content goes here -->
</body>
</html>

Tag Anatomy

<div id=“content” class=“dark-box”>
    <div class=“image-box”>
        <img src=“image.jpg” width=“320” height=“240”/>
    </div>
</div>

id - Unique identifier, for links/styles
class - Reusable identifier, for styles
id, class, src, etc. are attributes
All tags must close, some are self-closing

Example

View an example HTML page here.

CSS

Cascading Style Sheets
Used for the "look and feel" of the website,
separation of content and layout/design
Spec maintained by W3C
Current Version: CSS3

Using Stylesheets

External File (best practice)

<link rel="stylesheet" type="text/css" href="style.css"/>

Internal Stylesheet

<style type="text/css">
    #container {
        width: 1000px;
        margin: auto;
    }
</style>

Inline Styles (worst practice)

<span style="color:red; font-weight:bold">Lorem ipsum and the rest</span>

Syntax

#container {
    width: 1000px;    margin: auto;}.header {    font-size: 24px;    color: #FF0000;}

Selector ("#container", ".header")
Property/Value Pairs

Selectors

Use "*" to style EVERYTHING
Use a tag name to style all of those tags
Use "#" to style by id
Use "." to style by class
Many, many more