Scribd
Upload
46 views16 pages

WWW Dukelearntoprogram Com Course1 Doc

The document provides an overview of HTML, CSS, and JavaScript, including basic elements, properties, and functions. It covers essential tags for structuring web pages, formatting text, creating lists and tables, and handling user input. Additionally, it introduces specific functions for manipulating images and pixels through JavaScript.

Uploaded by

kedob56286
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
46 views16 pages

WWW Dukelearntoprogram Com Course1 Doc

The document provides an overview of HTML, CSS, and JavaScript, including basic elements, properties, and functions. It covers essential tags for structuring web pages, formatting text, creating lists and tables, and handling user input. Additionally, it introduces specific functions for manipulating images and pixels through JavaScript.

Uploaded by

kedob56286
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 16

Documentation

Duke Resources Home Duke Course Home Coursera Course Home

HTML
HTML
Basic HTML
Lists
Tables Full list of HTML elements
Input
As a reminder, in most browsers you can right-click on a page and select View Source to see the HTML
CSS code used to render the page.

CSS Properties and Values Basic HTML


Course Specific Functions
Tag Description Example
SimplePixel
SimpleImage All content of your webpage must go inside
<html>
Printing <html></html> tags.

Standard JavaScript Contains information about the webpage.


<head>
The title tag goes inside <head></head> tags.
Arithmetic Operations
Title of the webpage (what appears in the
Comparing Two Numbers
<title> window/tab of your browser).
Combining Comparisons
The text itself does not appear on webpage.
Math Functions
Random Functions Everything that appears on the webpage should
<body>
go between these tags
Background Information
<p>This is a paragraph.</p>
What is a Pixel? Defines a paragraph (text with some space on
<p>
Transparency: Alpha Channel the bottom and top). This is a paragraph.
Image Coordinate System
<h1> Heading tag, bold and bigger text. <h3>larger heading</h3>
You can use any number from <h1> to <h6> with <h6>smaller heading</h6>

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
<h1> being the largest heading and <h6> being larger heading
the smallest.
smaller heading

<b>bold</b>
<b> Apply bold formatting to text
bold
<em>emphasis</em>
<em> Apply emphasis to text
emphasis
HTML <img src="http://bit.ly/1QfkvVw"
Inserts an image. width="100px">
Basic HTML
Lists src is the link specifying the image to
Tables display (it is a required attribute)
Input <img> width (and height) specifies the size of
the image (it is an optional attribute)
CSS
Unlike most other tags, this start tag does not
CSS Properties and Values have a corresponding end tag.
Course Specific Functions

SimplePixel Links to another webpage.


SimpleImage <a
Printing href specifies the URL of the page to link
href="https://www.duke.edu/">Duke
<a> to (it is a required attribute).
University</a>
Standard JavaScript
There must be some text between the start and Duke University
Arithmetic Operations end tags to be the anchor of the link.
Comparing Two Numbers
Combining Comparisons
<div><p>This paragraph is inside
Math Functions <div> Defines a section of the web page.
a div.</p></div>
Random Functions

Background Information Lists


What is a Pixel?
Transparency: Alpha Channel Tag Description Example
Image Coordinate System
List item.
<li> <li>HTML</li>
List items can go inside unordered list, <ul>, or ordered list, <ol> tags.

<ul> Unordered list, each item has a bullet point. <ul>

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
<li>HTML</li>
<li>CSS</li>
</ul>

HTML
CSS

<ol>
<li>HTML</li>
<li>CSS</li>
HTML
<ol> Ordered list, each item has a number. </ol>
Basic HTML
1. HTML
Lists
2. CSS
Tables
Input

CSS Tables

CSS Properties and Values


Tag Description Example
Course Specific Functions
Defines a table.
SimplePixel <table> By default a table has no borders and is only as wide as the text it
SimpleImage contains.
Printing
Defines a table row (only has value within <table> tag).
<tr>
Standard JavaScript Table rows can contain either table data elements or table header cells.
<table>
Arithmetic Operations
<tr>
Comparing Two Numbers
Combining Comparisons <td>
Math Functions cell 1
Random Functions </td>
Table data element (standard table cell). <td>
Background Information <td> Can contain many types of data including text, images, links, lists, or even cell 2
a table.
</td>
What is a Pixel? </tr>
Transparency: Alpha Channel
</table>
Image Coordinate System
cell
cell 2
1

<th> Table header cell (a table cell with bold text). <table>

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
<tr>
<th>
heading
</th>
</tr>
<tr>
<td>
content
</td>
</tr>
HTML
</table>
Basic HTML heading
Lists content
Tables
Input
Input
CSS
Because the attributes used with input elements varies so much depending on the type of input you
CSS Properties and Values
want to use, we have provided several specific examples of using different types of input.
Course Specific Functions
Example Description
SimplePixel
SimpleImage
type is button
Printing
<input type = "button" value is text that appears
Standard JavaScript value = "change" on button
onclick is event handler,
Arithmetic Operations
onclick = "alert('clicked button')">
specifies to call alert
Comparing Two Numbers function when button is
Combining Comparisons clicked
Math Functions
Random Functions
type is color picker
Background Information
value is default color value
What is a Pixel?
<input type = "color" id lets us refer to input
Transparency: Alpha Channel value = "#001A57" element in JavaScript
Image Coordinate System id = "clr" onchange is event handler,
onchange = "docolor()"> specifies to call docolor
function when color is
changed

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
type is slider
<input type = "range" min is minimum value, max
min = "10" is maximum value
max = "100" value is default value
value = "10" id lets us refer to input
element in JavaScript
id = "sldr"
oninput is event handler,
oninput = "dosquare()"> specifies to call dosquare
function when slider is
HTML changed
Basic HTML
Lists
Tables <input type = "text" type is text
Input id = "finput"> id lets us refer to input
element in JavaScript
CSS

CSS Properties and Values


type is file
Course Specific Functions multiple = "false"
indicates user cannot select
SimplePixel
multiple files
SimpleImage <input type = "file" accept = "image/*"
Printing multiple = "false" indicates user can only
Standard JavaScript accept = "image/*" select image files
id = "finput" value is default value
Arithmetic Operations onchange = "upload()"> id lets us refer to input
Comparing Two Numbers element in JavaScript
Combining Comparisons onchange is event handler,
Math Functions specifies to call upload
Random Functions function when input
changes
Background Information

What is a Pixel?
Transparency: Alpha Channel
Image Coordinate System
CSS

Full list of CSS properties


Mozilla color picker tool

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
This website challenges people to use CSS to make as many different stylized versions as possible
using the same HTML code.

Common CSS Properties and Values

Example
Property Use with Example
Values

blue text: paragraphs, links, h1 {


HTML color rgb(0,0,255) list elements, table cells, color: rgb(0,0,255);
#0000FF headings }
Basic HTML
Lists
Tables
Input p {
12pt
CSS font-size 16px text font-size: 14pt;
100% }
CSS Properties and Values

Course Specific Functions


left td {
SimplePixel right
text-align text text-align: center;
SimpleImage center
justify
}
Printing

Standard JavaScript
blue body {
Arithmetic Operations background- table, table cell, page
rgb(0,0,255) background-color: #00FF00;
Comparing Two Numbers color backgrounds
#0000FF }
Combining Comparisons
Math Functions
Random Functions
top th {
Background Information vertical-
middle table cells vertical-align: top;
align
What is a Pixel? bottom }
Transparency: Alpha Channel
Image Coordinate System
float left images
right img {
float: right;
}
Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
img {
tables, table cells,
width 100px width: 80px;
images
}

td {
tables, table cells,
height 100px height: 10px;
HTML images
}
Basic HTML
Lists
Tables
table {
Input border- tables, table cells,
5px border-width: 2px;
width images
CSS }
CSS Properties and Values

Course Specific Functions solid table {


border- tables, table cells,
dotted border-style: solid;
SimplePixel style images
dashed }
SimpleImage
Printing

Standard JavaScript table {


blue
border- tables, table cells,
Arithmetic Operations rgb(0,0,255) border-color: red;
color images
Comparing Two Numbers #0000FF }
Combining Comparisons
Math Functions
Random Functions 5px table {
10px dotted tables, table cells,
Background Information border border: 2px solid red;
5px dashed images
green
}
What is a Pixel?
Transparency: Alpha Channel
Image Coordinate System border- collapse table
collapse table {
border-collapse: collapse;
}

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
Course Specific JavaScript Functions

SimplePixel

For these examples, assume

HTML pix1 is a pixel at coordinate (100, 200) representing the color Duke blue, with RGBA values of
(0, 26, 87, 255)
Basic HTML pix2 is a pixel at coordinate (300, 400) representing the color white, with RGBA values of (255,
Lists 255, 255, 255)
Tables
Input Function name Description Example
CSS returns the pixel's x-coordinate within the
getX() pix1.getX() is 100
image
CSS Properties and Values
returns the pixel's y-coordinate within the
getY() pix1.getY() is 200
Course Specific Functions image

SimplePixel returns the value of the pixel's red


getRed() pix1.getRed() is 0
SimpleImage component (always in the range 0-255)
Printing returns the value of the pixel's green
getGreen() pix1.getGreen() is 26
component (always in the range 0-255)
Standard JavaScript
returns the value of the pixel's blue
Arithmetic Operations getBlue() pix1.getBlue() is 87
component (always in the range 0-255)
Comparing Two Numbers
Combining Comparisons returns the value of the pixel's alpha, or
Math Functions getAlpha() transparency, component (always in the pix1.getAlpha() is 255
Random Functions range 0-255)
changes the value of the pixel's red
Background Information pix1.setRed(255)
component to newR (if newR is not in the
setRed(newR) changes the color to
What is a Pixel? range of 0-255 it is changed to be in that
(255, 26, 87, 255)
Transparency: Alpha Channel range)
Image Coordinate System changes the value of the pixel's green
pix1.setGreen(255)
component to newG (if newG is not in the
setGreen(newG) changes the color to (0,
range of 0-255 it is changed to be in that
255, 87, 255)
range)

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
setBlue(newB) changes the value of the pixel's blue pix1.setBlue(255)
component to newB (if newB is not in the changes the color to (0,
range of 0-255 it is changed to be in that 26, 255, 255)
range)
changes the value of the pixel's alpha, or
pix1.setAlpha(100)
transparency, component to newA (if newA is
setAlpha(newA) changes the color to (0,
not in the range of 0-255 it is changed to be
26, 87, 100)
in that range)
pix2.setAllFrom(pix1)
HTML changes the value of all of the pixel's
changes the color of
setAllFrom(otherPixel) components (its red, green, blue, and alpha)
pix2 to (0, 26, 87, 255)
Basic HTML to match otherPixel's values
Lists
Tables
Input SimpleImage

CSS For these examples, assume the variable logo has the value of the image "devil.png" below. It is 100
pixels wide and 85 pixels tall.
CSS Properties and Values

Course Specific Functions

SimplePixel
SimpleImage
Printing

Standard JavaScript
Function name Description Example
Arithmetic Operations
new SimpleImage("devil.png") is
Comparing Two Numbers
Combining Comparisons creates a
Math Functions SimpleImage to
new SimpleImage(filename)
Random Functions represent the
image in filename
Background Information

What is a Pixel? new SimpleImage(width, creates a new SimpleImage(100, 100) is


Transparency: Alpha Channel height) SimpleImage
Image Coordinate System whose dimensions
are width by
height. All the
pixels in this

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
image are black
(0, 0, 0, 255)

var input =
creates a document.getElementById("fileLoader");
SimpleImage to var img = new SimpleImage(input); is
HTML represent the
new image selected by
Basic HTML SimpleImage(fileInputElement) the user using the
Lists fileInputElement
Tables
given from the
Input
web page assuming the user selected that image from their
CSS computer.

CSS Properties and Values returns the


image's width, or
getWidth() logo.getWidth() is 100
Course Specific Functions number of pixels
in the X direction
SimplePixel
SimpleImage returns the
Printing image's height, or
getHeight() logo.getHeight() is 85
number of pixels
Standard JavaScript in the Y direction
returns the pixel in
Arithmetic Operations logo.getPixel(0, 0) is the pixel (255, 255,
getPixel(x,y) this image at the
Comparing Two Numbers 255, 255)
coordinate (x, y)
Combining Comparisons
Math Functions copies the RGBA
Random Functions values from the
logo.setPixel(50, 42, pix2) changes the
setPixel(x,y,pixel) given pixel into
Background Information color to white
pixel at the (x,y)
coordinates given
What is a Pixel?
Transparency: Alpha Channel setSize(width, height) resizes the image logo.setSize(300, 85) is
Image Coordinate System to be width by
height. The image
is scaled to fit into

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
the new
dimensions.
returns all the
pixels in the
image, starting in for (var pixel of logo.values()) {
the upper-left
corner and moving
values() // modify pixel
down to the lower-
right corner,
providing a way to }
HTML
access each pixel
Basic HTML in turn
Lists draws the image var canvas =
Tables to canvas, for
Input drawTo(canvas) document.getElementById("canvas");
drawing images on
logo.drawTo(canvas);
web pages
CSS

CSS Properties and Values Printing

Course Specific Functions


Function name Description Example
SimplePixel
SimpleImage displays something in the main "See It" area of print(image) shows the
print(something)
Printing the page image

Standard JavaScript displays something in the small area at the debug(x) shows the value
debug(something)
bottom of the "See It" area of the page of the variable x
Arithmetic Operations
Comparing Two Numbers
Combining Comparisons Standard JavaScript
Math Functions
Random Functions

Background Information Arithmetic Operations

What is a Pixel?
Transparency: Alpha Channel Operator Description Example
Image Coordinate System + addition 4 + 5 is 9

- subtraction 9 - 5 is 4

* multiplication 3 * 5 is 15

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
6 / 3 is 2
/ division
6 / 4 is 1.5

% mod/remainder 5 % 3 is 2

Comparing Two Numbers

Operator Description Example

HTML == is equal to 3 == 3 is true

!= is not equal to 3 != 3 is false


Basic HTML
Lists >= is greater than or equal to 4 >= 3 is true
Tables
Input <= is less than or equal to 4 <= 3 is false

> is strictly greater than 4 > 3 is true


CSS
< is strictly less than 3 < 3 is false
CSS Properties and Values

Course Specific Functions Combining Comparisons - Logic Operators

SimplePixel
For these examples, assume the variable x has the value 5.
SimpleImage
Printing
Operator Description Example
Standard JavaScript
(x < 3 || x > 7) is false
|| returns true if at least one part of the comparison is true
Arithmetic Operations (x < 3 || x < 7) is true
Comparing Two Numbers
(x > 3 && x < 7) is true
Combining Comparisons && returns true only if both parts of the comparison are true
Math Functions (x > 3 && x > 7) is false
Random Functions ! reverses the boolean value of a comparison (! x == 5) is false
Background Information
Math Functions
What is a Pixel?
Transparency: Alpha Channel
Image Coordinate System Function name Description Example
Math.abs(-3.6) is 3.6
abs(x) returns absolute value of x
Math.abs(3.2) is 3.2

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
ceil(x) returns x, rounded upwards to the nearest integer Math.ceil(3.6) is 4
Math.ceil(3.2) is 4

Math.floor(3.6) is 3
floor(x) returns x, rounded downwards to the nearest integer
Math.floor(3.2) is 3

Math.round(3.6) is 4
round(x) returns x, rounded x to the nearest integer
Math.round(3.2) is 3

HTML Random Functions

Basic HTML
Function name Description Example
Lists
Tables Math.random() might return 0.523
Input
random() returns a random number between 0 and 1
Math.random() might return 0.983

CSS

CSS Properties and Values Background Information

Course Specific Functions

SimplePixel What is a Pixel?


SimpleImage
Printing Digital images are made of pixels. A pixel is a small point of colored light. When you look at a computer
monitor, the image you see is actually made of a grid of these tiny dots of light. They are so small and
Standard JavaScript so close together that it looks like one continuous picture. To get an idea of how small a pixel is, the
monitor that I happen to be using as I write this has a resolution of 1440 x 900 (read as "1440 by
Arithmetic Operations 900"). That means that there are 1,440 pixels across the top and 900 pixels down one side, for a total
Comparing Two Numbers of almost 1.3 million pixels.
Combining Comparisons
Math Functions This is what pixels might look like if they were magnified. This is an example of a 5x4 image because it
Random Functions is 5 pixels wide and 4 pixels tall.

Background Information

What is a Pixel?
Transparency: Alpha Channel
Image Coordinate System

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
Each pixel has a color value. We need a way to represent colors so that we can tell the computer which
color to make each pixel. There are many color representations, but JavaScript uses a scheme called
the RGBA color model. Basically, it means that a color is represented by four numbers:

R (the amount of red light)


G (the amount of green light)
B (the amount of blue light) and
A (called "alpha", this number tells how transparent the color
should be)

So each color is represented by these four numbers ("Everything's a


HTML
number", remember?). Moreover, each of these number slots must
Basic HTML have a value between 0 and 255. You may be wondering whether
Lists or not only 256 possibilities for each slot is enough to make all the
Tables many colors that we might want. If you have 256 possibilities for each
Input of the R, G, and B values, (ignoring the transparency number for now)
then the total number of colors available is over 16 million! It is
CSS estimated that the human eye can only detect 10 million different
colors, so there's no worry that you won't be able to make any color you want.
CSS Properties and Values
Since the computer uses light to make a picture, the RGBA model is an additive color model. This
Course Specific Functions means that the more the medium is added, the closer the color gets to white. Contrast this with using
paint as a medium. That is a subtractive color model because the more paint you add, the further you
SimplePixel get from white. So it should come as no surprise then that a color with R, G, and B values all 0 is black
SimpleImage (no light) and a color with R, G, B values all 255 is white (pure light). Think of these numbers as knobs
Printing that you can turn up or down. If you turn on the red and blue lights and leave off the green light, you
have shades of purple (R = 150, G = 0, B = 150, for example). The more you turn up the light, the
Standard JavaScript
higher the number goes and the brighter the color gets. How will you know what values to use for R, G,
Arithmetic Operations and B to make the color you want? If you search for "RGB color chart" on the Internet you will find lots
Comparing Two Numbers of sites with palettes of colors and their corresponding values.
Combining Comparisons
Math Functions Transparency: Alpha Channel
Random Functions
The last value, called alpha, is also a number whose
Background Information value must be between 0 and 255. This time the value of
the number does not change the color's hue, but rather
What is a Pixel? the transparency of the color. If a pixel has an alpha
Transparency: Alpha Channel value of 0, it is completely transparent, or invisible. If it
Image Coordinate System has a value of 255, it is completely opaque. Using this
transparency value allows you to have layers of color on
the screen, or shapes that can be partially seen through
other shapes.

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
Image Coordinate System

Finally, it is important to be able to distinguish one pixel from another. We do this by referring to each
pixel's location on the screen or image. Each pixel gets an X and Y value, where (0,0) is the top left
corner of the screen. (This can take some getting used to as it's not the way a Cartesian Plane is drawn
in math class!)

The X value refers to how far right the pixel is, and the Y value refers to how far down the pixel is. For
my computer monitor, which is 1440 x 900, the top left corner is (0,0), the top right is (1439,0), the
bottom left is (0,899), the bottom right is (1439,899), and the middle is (720, 450).
HTML

Basic HTML
Lists
Tables
Input

CSS

CSS Properties and Values

Course Specific Functions

SimplePixel
SimpleImage
Printing

Standard JavaScript

Arithmetic Operations
Comparing Two Numbers All of the discussion so far has been generic knowledge of a computer representation of images and
Combining Comparisons colors. In other words, the same information would probably apply if you were programming in a
Math Functions language other than JavaScript. The rest of this page gives you details that are specific to JavaScript
Random Functions and the problems you are asked to solve.

Background Information

What is a Pixel?
Transparency: Alpha Channel
Image Coordinate System

Material accessible from this webpage developed by the instructors at Duke University is licensed under a Creative Commons Attribution 4.0
International License.

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD
HTML

Basic HTML
Lists
Tables
Input

CSS

CSS Properties and Values

Course Specific Functions

SimplePixel
SimpleImage
Printing

Standard JavaScript

Arithmetic Operations
Comparing Two Numbers
Combining Comparisons
Math Functions
Random Functions

Background Information

What is a Pixel?
Transparency: Alpha Channel
Image Coordinate System

Create PDF in your applications with the Pdfcrowd HTML to PDF API PDFCROWD

You might also like