Author: Pam Van Londen

OSU Computer Science Instructor

Quote and Blockquote

Style Blockquote with citation and quotation marks
Single-sentence quotations and multi-sentence quotations can be marked so that machines reading them (search engines) will differentiate the text from other text.

1. Quotes in sentences.

q tag is for single sentence quotes.

  1. Markup for q is like this:
    1
    2
    <q cite="http://...">quotation text</q>
    <p><cite>author</cite></p>
  2. Style q like this:
    1
    2
    3
    q {display:inline; text-style:italic;}
    q:before { content: open-quote;}
    q:after {content: close-quote;}

2. Blockquotes below sentences

Blockquotes are for indented multiple-sentence quotations and include a citation.

  1. Markup blockquote like this:
    1
    2
    3
    4
    <blockquote cite="http://...">
    It is easy to make a dorky web page. It's also easy to make a very nice, clean, professional-looking web page even if you don't have much design experience.
    <cite>Robin Williams, author/designer</cite>
    </blockquote>
  2. Style blockquoteso that it stands out from regular text and the quotation marks are obvious. Place the citation below the quoted text, like this:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    blockquote {
        font-size: 150%;
        font-style: italic;
        width: 50%;
        line-height: 1.5;
        position: relative;
        color: orange;
        text-align:left;
        padding:0 0 0 3%;
    }
    blockquote:before {
        display: block;
        content: "“";
        font-size: 600%;
        position: absolute;
        left: -20px;
        top: -30px;
        color: black;
    }
    blockquote:after {
        color: black;
        content: "”";
        display: block;
        font-size: 600%;
        position: absolute;
        right: 0;
        bottom: -20px;
    }
    blockquote cite {
        color: black;
        font-size: 14px;
        display: block;
        text-align: right;
        margin-top:20px;
    }
  3. Style cite like this so that you don’t have to type — before the author’s name:
    1
    cite:before {content:"— ";}

Scoring Criteria

  1. Unique fonts and colors are incorporated so the blockquote elements do not match the lesson’s example.
  2. Position of the quotation marks matches the length of the quotation and author text.

What is JavaScript (JS)?

PurposeExamplesSyntaxTest

Purpose

JavaScript logo JavaScript (JS) is a client-side scripting language that can be embedded into HTML files. Most modern browsers interpret this language to support object-oriented and procedural programming which controls web pages in the browser, on a web server, and inside mobile applications.

While Hypertext Markup Language (HTML) gives web pages basic structure and marks content, it is the Cascading Style Sheet (CSS) that defines how that page structure and content should look. In addition, scripts like JavaScript and HyperText Preprocessor (PHP) add functions to control windows, data structures, files and folders, media, forms, and microinteractions, etc.

Content versus Style versus Function

Examples

Learn JavaScript in 12 minutes. © 2010 Jake Wright.

JavaScript Syntax

Typing JavaScript requires basic syntax, which follow these rules:

  • Most scripts are provided in external files but some are embedded in the head area, under the footer, or inline within HTML elements.
  • Each embedded script gets a beginning <script> and ending </script> tag.
  • Function names are written in lowercase letters.
  • Semicolons are placed at the end of each function.
  • Functions must be nested, not overlapped.
  • Some scripts work best in the head area of a web page. If that isn’t required by the script then it should be loaded at the bottom of the page to increase rendering speed.
  • External JavaScripts need a .js file extension.

In this course, you will be adding functions inside HTML elements/tags as well as linking to external JavaScript source files.

View the diagrams below in full screen mode to see the labels for each part of a JavaScript script.

Link to an external file:

<script  src=”library.js“></script>

  • Begin tag
  • Source attribute
  • File name or path value in quotations
  • End function and statement

Inline function as an attribute and value inside an HTML element:

<a  onload=”sound.play()”Play></a>

  • Begin tag
  • Function name
  • Value in quotations
  • End function and statement

A function in an external file:

var pets = pet(‘cat’, ‘dog’, ‘pig’);

  • Define
  • Variable name
  • Function & values
  • End function

Test

Simple online tools can test the syntax of JavaScripts, but exhaustive user-testing will ensure it works as intended and even more testing agains hacking scripts will ensure it is unhackable by bad actors.

What is HyperText Pre-Processor (PHP)?

PurposeExamplesSyntaxTestResourcesQuiz

Purpose

PHP logo Hypertext Pre-Processor (PHP) is a server-side scripting language that can be embedded into HTML files. It can be used to display the last date a page was modified, to include snippets of other code, to interact with databases, to send form data, and define and use variables.

While HTML gives web pages basic structure and marks content, it is the Cascading Style Sheet (CSS) that defines how that page structure and content should look. In addition, scripts like JavaScript and HyperText Preprocessor (PHP) add functions to control windows, data structures, files and folders, media, forms, etc.

Content versus Style versus Function

Examples

Learn PHP in 15 minutes. © 2010 Jake Wright.

PHP Syntax

Typing PHP requires basic syntax, which follow these rules:

  • Each script gets a beginning <?php and ending ?> tag.
  • Function names are written in lowercase letters.
  • Semicolons are placed at the end of each function.
  • Values for attributes are surrounded by single quote marks.
  • Functions must be nested, not overlapped.
  • Files which use PHP need a .php file extension.

View this page in full screen mode to see the each piece of PHP syntax labeled:

<?php  echo ‘Hello world’;  ?>

  • Begin tag
  • Function name
  • Value in quotations
  • End function and statement

Test

Tools for validating PHP accuracy and security:

Resources

PHP

Start

Congratulations - you have completed PHP.

You scored %%SCORE%% out of %%TOTAL%%.

Your performance has been rated as %%RATING%%


Your answers are highlighted below.
Return
Shaded items are complete.
123End
Return

Chat with the instructor in Canvas

Reply to this lesson's thread in this chapter's forum.

[quick-chat room=”php” guests_visible=”1″ send_button=”1″]

What are Cascading Style Sheets (CSS)?

PurposeExamplesSyntaxTestingResourcesQuiz

Purpose

CSS3 logo‘

While HTML gives web pages basic structure and marks content, it is the Cascading Style Sheet (CSS) that defines how that page structure and content should look. In addition, scripts like JavaScript and HyperText Preprocessor (PHP) add functions to control windows, data structures, files and folders, media, forms, etc.

content-styles-functions

Style sheets save web authors a great deal of time. Instead of adding specific styles to each piece of text, they are generally applied globally with a style sheet (.css file). A style can be defined in a style sheet file and applied automatically in other web pages. Style sheets control the look of text, the layout of the page, how graphics are displayed, and how layers interact with the mouse.

What is CSS? © Lynda.com 2012. 3:00mins Flash.

Styles can be applied in three ways:

  1. Inline: defined inside a tag using the style attribute.
    1
    <h1 style="background-color:#ffcc99">Headline</h1>

    For this course, we will NOT be using inline styles.

  2. Internal (embedded): defined in the <head> and applied with a <style> tag.

    1
    2
    3
    <style type="text/css">
    body {background-color:#ffcc99}
    </style>

    For this course, we will NOT be using embedded styles.

  3. External (linked or imported) : Defined in a separate document with a  .css file extension and attached in the <head> section using a <link /> tag.

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

    External files define the look and page layout for an entire website; not just one page or element/tag. They can be named anything you want and you can link to more than one. It is customary to define styles for all known elements/tags, then define your own classes and IDs for additional customization. Typically, the font family, background, text colors, and page layout are defined in the external file.
    The <link /> tag references an external style sheet file, notes the relationship, and can optionally note the media type in separate attributes:

    1
    2
    3
    <link rel="stylesheet" href="screen.css" media="screen" />
    <link rel="stylesheet" href="print.css"  media="print" />
    <link rel="stylesheet" href="mobile.css" media="handheld" />

    For this course, we will be using external stylesheet files and the main file will include media queries to keep the site responsive to device sizes.

The Cascade

Style definitions/declarations are applied using a cascading method. In its simplest terms, the cascade works like this:

Cascade
Linked external
style sheet is overruled by
Imported external
style sheet, which is overruled by
Embedded/internal
document level style sheet, which is overruled by
Inline
style definition.

How the cascade changes control based on placement and use of options.

Dan Hitchcock of UCLA Extension explains the Cascade effect in CSS. More specific control belongs to the visitor via their browser. The next level of control belongs to the web developer when using !important with a definition inline, then any inline style, then any embedded style in the <head> section of a document, then styles at the bottom of a .css file. Using !important in the .css file overrides the same declaration made earlier in the document.

Examples of CSS

HTML and related CSS with results displayed in the body

CSS Syntax

Note that CSS uses element names, curly braces, colons, and semicolons. In some cases, a space or comma is also needed. View the diagram below in full screen mode to see the labels for each part of a style declaration.

h1 { color:white; font-size:200%; }

  • Tag, selector, element
  • Property
  • Value
  • Property
  • Value

Testing

The following tools can test the validity of styles to help keep code ‘clean’ and easy to read by machines and humans. The Unicorn validation service by W3.org is the most commonly-used tool, which is required for each lesson in this course.

Resources

What is CSS?

Start

Congratulations - you have completed What is CSS?.

You scored %%SCORE%% out of %%TOTAL%%.

Your performance has been rated as %%RATING%%


Your answers are highlighted below.
Return
Shaded items are complete.
12345
67End
Return

Chat with the instructor in Canvas

Reply to this lesson's thread in this chapter's forum.

[quick-chat room=”css” guests_visible=”1″ send_button=”1″]

What is HyperText Markup Language (HTML)

PurposeExamplesSyntaxTestingResourcesQuiz

Purpose

HTML5 logo Hypertext Markup Language (HTML) is a set of elements/tags applied to text and images in plain text files which tell browsers how to display text, position graphics and form items, and display links to other pages. HTML can be used in conjunction with other languages such as Cascading Style Sheets, JavaScript, PHP, ASP, Ruby, etc. to provide unlimited functionality and interactivity.

HTML5 is the most current version of this standard markup language. Older versions still in use include HTML 4 and XHTML 1.1. These older versions do not take advantage of HTML 5’s:

  1. Semantic language to improve accessibility (for humans and machines)
  2. Improved media embedding
  3. Simpler interactive form functions
  4. Consistent page layout

Typically, content is kept separate from styles and functions so that updating and upgrading can be seamless. Styles are controlled by Cascading Style Sheets (CSS) and Functions are controlled with JavaScript, AJAX, PHP, and other scripting languages.

Content marked with HTML is kept separate from styles in a CSS file and functions are kept separate in JavaScript or PHP files.
Content marked with HTML is kept separate from styles in a CSS file and functions are kept separate in JavaScript or PHP files.
Let’s Learn and Create with HTML5© Eldhose Chacko of W3 IT Tutorials 2014.

Examples of HTML

View the web page, HTML, and CSS code all in one screen with Inspect Element.
View the web page, HTML, and CSS code all in one screen with Inspect Element.
© 2013 Little Web Hut. Tutorials for U.
Listen to CSS Tricks’ Chris Coyier screencast #58: HTML & CSS – The VERY Basics. © Chris Coyier 32mins Flash
HTML 5: What is HTML? © Educator.com 2012. 6mins Flash.

HTML Syntax

Typing HTML requires basic syntax, which follow these rules:

  • Each line of text gets an element/tag at the beginning and end (unless the tag is self-closing).
  • Tag names are written in lowercase letters.
  • Attributes within tags are written in lowercase letters.
  • Values for attributes are surrounded by quotation marks (inch marks).
  • Tags within tags must be nested, not overlapped.

View the diagrams below in full screen mode to see the labels for each part of an HTML element.

<h1>First headline</h1>

  • Beginning tag, selector, element
  • String of text
  • Ending tag, selector, element

This element syntax is referred to as “self-closing”:

<img src=”pic.jpg” alt=”text” />

  • Beginning tag, selector, element
  • attribute
  • value
  • attribute
  • value
  • Self-closing tag, selector, element

Testing

The following tools can test the validity of styles to help keep code ‘clean’ and easy to read by machines and humans. The Unicorn validation service by W3.org is the most commonly-used tool, which is required for each lesson in this course.

Resources

HTML5

Start

Congratulations - you have completed HTML5.

You scored %%SCORE%% out of %%TOTAL%%.

Your performance has been rated as %%RATING%%


Your answers are highlighted below.
Return
Shaded items are complete.
12345
End
Return

Chat with the instructor in Canvas

Reply to this lesson's thread in this chapter's forum.

[quick-chat room=”html” guests_visible=”1″ send_button=”1″]