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


  1. "I already know HTML programming..."

  2. "JavaScript? But I saw that video..."

  3. "PHP is 'a fractal of bad design...'"

  4. "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


Title

Intro to Webs

By Ben Centra

Made with Slides.com

Intro to Webs

New and improved Intro to Webs seminar for Computer Science House. Features the basics of HTML/CSS, JavaScript, and PHP.

  • 1,376

More from Ben Centra