HTML
Metadata Element (元數據元素)
<html>
- Contains all other elements
- Specifies using HTML standard
<head>
- Information about the page: title, scripts, CSS
<title>
- Specifies page title
- Nested inside tags
Sectioning ELement
<body>
- Contains all items seen on page
<h1>
- Section header (一般用來做大標題)
- Also <h2>, <h3> … <h6>, 一般也用來做標題，只是稍小一點；
<div>
- Defines section of web page
- Useful for CSS
Semantic or Style HTML Tags
Tags surround text or page elements
- <b>Make text stylistically different</b>
- <b>Traditionally bold face, but can change</b>
- <em>Emphasize text!</em>
- <b>this</b><em>is an<b> example of nested</b>tags</em>
Image and Multimedia Tags
Web pages can include images, video, audio.
- Image tag:
<img src=“http://xyzw–png” width=“75%”/>（width和src的順序可以調換）
<img src=“http://bit.ly/firstimageurl”/>- Options: extra information
- Some required
- No end tag, src required, width optional
- height=
- CSS later
- Options: extra information
Linking Pages Together
- anchor tag <a></a>：用來說明一個對另外網站的超鏈接；
- href attribute：給出超鏈接的URL地址；
- clickable text：要在兩個anchor tag之間放置一段文字作爲可點擊的文字；
Simple Lists
- Some lists use circles or bullets
- These are unordered lists, tag: <ul></ul>
- Content viewed in order, list labels all the same
- For later: labels can be changed with CSS
Constructing an HTML List
- Inside <ul></ul> must have sequence of <li></li> elements.
- Anything between <li></li> elements, not just text: <img>,<a href>, <ul>,…
Creating Order in HTML Lists
- May want ordered list
- Numbers can be important
- Also possible: letters
- <ol> is ordered list
- <li></li> required
- Automatic numbering
- Add, remove <li>
- Numbers change
Nested Lists
-
<ul>in<li></li>
- Bullets “change”
- Indentation helps
- Reading HTML
-
Composing <ul>
- Between <li></li>
HTML Tables
-
Tables information in rows and columns
- General organization? CSS perferred
-
Tables constructed from HTML elements that correspond to visible table
-
HTML table elements
- <table></table>
- contains rows <tr></tr>（每一行都要包含在tr標籤之間）
-
Rows contain
- header elements <th></th>（表頭元素包含在th標籤之間）
- table cells <td></td> （表元素包含在td標籤之間）
CSS: Classes
-
Classes: named styles
- HTML
<li class=“foodLi”> Chocolate</li>
<li class="foodLi> Cherries
<li class="foodLi> Ice Cream - HTML
Classes: named styles (for many elements)
IDs: Names one element
Combinators: Select by relationship
CSS Syntax
-selector { property : value ; }
Creating an HTML Button
<input type = “button” value = “change” onclick = “alert(‘clicked button’)”>
onclick attribute: triggers event handler on click.
We could also be able to use JavaScript to handle the events generated by the button.
<input type = “button” value = “change” onclick = “dochange()”>
function dochange() {
alert(‘clicked button’);
}
Changing Pages Interactively
-
To change a web page via JavaScript, must access HTML elements by code.
- Can access all <h1> tags or <li> tags or …
- Can access elements by class name or ID name
-
We’ll access individual elements by ID
- Add CSS classes, or change colors, or change texts, or … do more via JavaScript code.
document.getElementById() used to get a HTML element by the associated IDs.
Using HTML5 Canvas
-
using a <canvas> element
- Used as part of DLTP and JavaScript image processing.
- Used in many other applications to display graphical context.
-
<canvas> element used to draw graphics
- Usually with JavaScript!
-
Container for graphics
-
Script draws the graphics
-
Methods for drawing paths, boxes, circles, text, and adding images
Inputs and Events
-
The HTML <input> element gets input from the user and processes the input.
- Button
- Text
- Color picker
- Range
-
Events
- Mouse click
- Mouse enter/leave
- Field changes
- Input given
Color Picker
<input type = “color” value = "#001A57 id = “clr” onchange = “docolor()”>
function docolor() {
var dd1 = document.getElementById(“d1”);
var colorinput = document.getElementById(“clr”);
var color = colorinput.value;
dd1.style.backgroundColor = color;
}
Slider Input
<input type = “range” min = “10” max = “100” value = “10” id = “sldr” oninput = “dosquare()”>
function dosquare() {
var dd1 = document.getElementById(“d1”);
var sizeinput = document.getElementById(“sldr”);
var size = sizeinput.value;
var ctx = dd1.getContext(“2d”);
ctx.clearRect(0, 0, dd1.width, dd1.height);
ctx.fillStyle = “yellow”;
ctx.fillRect(10, 10, size, size);
}