HTML
Outline
- hyper Text Markup language
- HTML elements, tags and attributes
- HTML 5
- Forms
- Audios and Videos
Hyper Text Markup Language
- HTML is used to mark parts of documents to indicate how they should appear in print or on a display.
- HTML is not a programming language i.e. cannot be used to describe computations.
- CSS ： separate different components change in CSS, no need in HTML. CSS- how HTML should display.
- HTML + CSS + JS : focus on interaction with the users.
HTML Document
- HTML document is a mixture of content and control.
- Controls are specified by tags and most HTML tags consist of a pair of syntactic markers that are used to delimit(界定) particular kinds of content.
-
A pair of tags and their content form an element.
<p>This is a paragraph </p> - Some tags include attribute specification e.g.
<img src= "mypicture.jpg"/>
<img src= “mypicture.jpg”/> X- wrong for the double quotes ! There will be no compile error! Be careful!
- Comments are used to increase readability.
`` - Browsers will ignore
- Unrecognised tags including misspelt tag (unlike in a program, there is no compile error messages!)
- Line breaks, multiple spaces and tabs.
- <pre > -> tag can deal with it .(later)
Absolute File Path in HTML Document
- To view an HTML file on a local machine, if you put images in a different folder from the HTML file itself, then the absolute path of that image file should be used e.g.for MAC
<img src= "file://Users/Desktop/pics/scottish-fold-cat.jpg"/> - Easiest way to obtain the absolute path of an image is by <u>right clicking on the image and open with browser,</u> copy the URL and paste it onto your HTML code
Relative File Path in HTML Document
- To view a HTML file on a web server through the Internet, a relative path of that image can be used e.g. when iamge folder is in the current folder use
<img src = "pics/scottish-fold-cat.jpg"/>
E1.png
Hello World!!!
- A HTML document must include the four tags <html>,<head>,<title>,and <body>.
- The head element provides information about the document but not the content, e.g. title, character set
<!-- Example #1-->
<!DOCTYPE html>
<html>
<head>
<title> My first webpage </title>
</head>
<body>
<p> Hello World! </p>
</body>
</html>
Paragraphs in HTML
<!-- Example #2-->
<!DOCTYPE html>
<html>
<head>
<title> My first comedy </title>
</head>
<body>
<p> Roses are red,
violets are blue,
onions stink,
and so do you!! </p>
<!-- it turn out to be only one line!
Line breaks, multiple spaces and tabs are ignored by the browser.
-->
</body>
</html>
E2.png
<!-- Example #3-->
<!DOCTYPE html>
<html>
<head>
<title> My first comedy - using p </title>
</head>
<body>
<p> Roses are red, </p>
<p> violets are blue, </p>
<p> onions stink, </p>
<p> and so do you!! </p>
<!--The browser inserts a line break at the end of
the paragraph when <p> is used -->
</body>
</html>
E3.png
Line Breaks
<!-- Example #4-->
<!DOCTYPE html>
<html>
<head>
<title> My first comedy - using p and br </title>
</head>
<body>
<p> Roses are red, <br>
violets are blue, <br>
onions stink, <br>
and so do you!! </p>
<!--Compare the difference between <p> and <br>-->
</body>
</html>
E4.png
Preserve White Space
<!-- Example #5-->
<!DOCTYPE html>
<html>
<head>
<title> My first comedy - using pre </title>
</head>
<body>
<pre> Roses are red,
violets are blue,
onions stink,
and so do you!! </pre>
<pre> Roses are red,
violets are blue,
onions stink,
and so do you!! </pre>
<!--To prevent the browser from eliminating multiple spaces
and ignoring line breaks, however the display won't be the same as
the code, because browser will count the spaces-->
</body>
</html>
E5.png
Headings
<!-- Example #6-->
<!DOCTYPE html>
<html>
<head>
<title> Levels of headings!! </title>
</head>
<body>
<h1> In HTML, there are 6 levels of headings, </h1>
<h2> specified by the tags h1, h2, h3, h4, h5 and h6. </h2>
<h3> On most browsers, h1, h2 and h3 use font sizes that are larger than that of default size. </h3>
<h4> h4 uses the default font size. </h4>
<h5> h5 and h6 use smaller font sizes than the default size. </h5>
<h6> The heading tags always break the current line. </h6>
<!-- 1->6 From big to small-->
</body>
</html>
E6.png
Block Quotations
<!-- Example #7-->
<!DOCTYPE html>
<html>
<head>
<title> Cinderella </title>
</head>
<body>
<p> At the ball, the entire court is entranced by Ella when she appears.
Ella and Kit proceed to have their first dance. This is much to the chagrin of the Grand Duke,
who has promised Kit to Princess Chelina of Zaragoza, a comment which Lady Tremaine overhears.
While surprised at Kit's true identity, Ella continues to bond with him, touring the palace grounds.
As Ella is about to tell Kit her name, Ella hears the clock start to chime midnight and flees.
As she flees the castle, one of her slippers falls off. After being pursued by the Grand Duke and
his men, Ella manages to escape home before the final stroke of midnight chimes, causing the spell
to wear off. After returning home, Ella hides the remaining glass slipper left behind under the
floorboards of her bedroom [1].</p>
<blockquote>
<p>
Many curious souls wonder: <br/>
"If Cinderella's shoe fit perfectly, then why did it fall off?" <br/>
"The prince says Cinderella is the love of his life, but how could he forgets what
she looks like and has to put the shoe on every girl he meets!?"
</p>
</blockquote>
<p> Reference <br/>
[1] https://en.wikipedia.org/wiki/Cinderella_(2015_Disney_film)
</p>
</body>
</html>
E7.png
Font Styles and Character Entities
<!-- Example #8-->
<!DOCTYPE html>
<html>
<head>
<title> Font styles and Character Entities </title>
</head>
<body>
<p>
<h4>Font Styles </h4>
This text is normal. <br/>
<strong> This text is strong. </strong><br/>
<em> This text is emphasis. </em><br/>
<code> This text is code. </code><br/>
X<sub>2</sub><sup>3</sup> <br/><br/>
</p>
<hr />
<p>
<h4> Character Entities </h4>
& <br/>
< <br/>
> <br/>
" <br/>
' <br/>
¼ <br/>
37° <br/>
<br/><!--one space-->
© <br/>
€ <b/r>
</p>
</body>
</html>
E8.png
Meta Element
<!-- Example #9-->
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8"><!--Character set-->
<meta name = "description" content= "data structure">
<!--Provide information about the document, primarily for search engines-->
<meta name = "keywords" content = "binary trees, linked lists">
<meta name = "author" content = "John Doe">
</head>
<body>
<p>All meta information goes before the body.</p>
</body>
</html>
E9.png
Image Element
<!-- Example #10-->
<!DOCTYPE html>
<html>
<head>
<title> Grumpy Cat! </title>
</head>
<body>
<p>
<!--An inline element that specifies an image that is to appear in a document-->
<img src = "grumpy.jpg" /><br/>
<img src = "grumpy.jpg" height = "200" width = "200" alt = "grumpy" /> <br/>
<img src = "grumpy.jpg" width = "50%" alt = "grumpy50" />
</p>
</body>
</html>
E10.png
Hypertext Links
<!DOCTYPE html>
<!-- Example #11 html_201920.html-->
<html>
<head>
<title> Grumpy Cat! </title>
</head>
<body>
<p>
<a href = "http://www.bing.com"> go to bing!! </a><br/>
<a href = "http://www.bing.com"> <img src = "grumpy.jpg" /> </a><br/><!---Click picture then go to bing.com-->
<a href = "copy_cat.html"> go to copy cat!! </a><br/>
<a href = "#bottom"> go to grumpy's bottom!! </a><br/>
<!--#bottom is an anchor -->
<br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/>
<img src = "grumpy.jpg" id = "bottom" />
</p>
</body>
</html>
<!--copy_cat.html-->
<!DOCTYPE html>
<html>
<head>
<title> Copy Cat! </title>
</head>
<body>
<p>
This is a copy cat!! <br/><br/>
<a href = "html_201920.html"> back to grumpy cat!! </a><br/>
<a href = "html_201920.html#bottom"> go to grumpy's bottom!! </a><br/>
</p>
</body>
</html>
A Breakdown of a HTML tag
- Zero or more attributes can be specified for all HTML elements.
- Attributes come in name-value pairs.
-
Previous examples of <img> and <meta> HTML tags have multiple attributes in some of them.
image.png
HTML 5
- Some tags e.g.
<em> <code> has no differences between HTML 4.01 and HTML 5 - Some attributes of certain tags have been removed e.g. align in <p> <img> <h1><h6>
Unordered and Ordered lists
<!DOCTYPE html>
<html>
<head>
<title> List </title>
</head>
<body>
<p>
There are three type of lists:<br>
<ul>
<li> Unordered lists </li>
<li> Ordered lists </li>
<li> Definition lists </li>
</ul><br>
Ordered list uses Arabic numeral by default. Options are:<br>
<ol>
<li> Characters </li>
<ol type = "A">
<li> a </li>
<li> A </li>
<li> i </li>
<li> I </li>
</ol>
<li> Numbers </li>
</ol>
Definitions of the type of ordered list are: <br>
<dl>
<dt> a </dt>
<dd> lowercase characters </dd>
<dt> A </dt>
<dd> uppercase characters </dd>
<dt> i </dt>
<dd> lowercase roman numbers </dd>
<dt> I </dt>
<dd> uppercase roman numbers </dd>
</dl>
</p>
</body>
</html>
E12.png
Tables
<!-- Example #13-->
<!DOCTYPE html>
<html>
<head>
<title> Table </title>
</head>
<body>
<table>
<caption> My Table </caption>
<tr>
<td></td>
<th>R1C2</th>
<th>R1C3</th>
<th>R1C4</th>
</tr>
<tr>
<th>R2C1</th>
<td>R2C2</td>
<td>R2C3</td>
<td>R2C4</td>
</tr>
<tr>
<th>R3C1</th>
<td>R3C2</td>
<td>R3C3</td>
<td>R3C4</td>
</tr>
</table>
<br/><br/>
<table border = "1"> <!--not use anymore-->
<caption> My Table Span </caption>
<tr>
<td></td>
<th colspan = "2">R1C2</th>
<th>R1C4</th>
</tr>
<tr>
<th>R2C1</th>
<td rowspan = "2">R2C2</td>
<td>R2C3</td>
<td>R2C4</td>
</tr>
<tr>
<th>R3C1</th>
<td>R3C3</td>
<td>R3C4</td>
</tr>
</table>
</body>
</html>
E13.png
Elements within a Form
- Type attribute is required by all <input>
- Name attribute is required by all controls except reset and submit
- Value attribute is required by checkboxes and radio buttons
<!-- Example #14-->
<!DOCTYPE html>
<html>
<head>
<title> Form - Input Elements </title>
</head>
<body>
<form>
<p>
First Name: <input type = "text" name = "txtFName"> <br/>
<label> Last Name: <input type = "text" name = "txtLName" size = "30" maxlength = "10"> </label><br/>
<label> Password: <input type = "password" name = "txtPass" align = "right" placeholder = "Please enter your password"> </label>
<br/><br/>
<label> <input type = "checkbox" name = "chkEdu" value = "educated" checked = "checked" /> Education </label><br/>
<label> <input type = "checkbox" name = "chkOnlyChild" value = "onlyChild" /> Only Child </label><br/><br/>
<!--Name will be the same, but value will be different -->
<label> <input type = "radio" name = "age" value = "under20" checked = "checked" /> less than 20 </label><br/>
<label> <input type = "radio" name = "age" value = "under30" /> 20 - 29 </label><br/>
<label> <input type = "radio" name = "age" value = "under40" /> 30 - 40 </label><br/><br/><br/>
Prefer food:
<select name = "optGroceries">
<option> milk </option>
<option> bread </option>
<option> eggs </option>
<option> cheese </option>
</select><br/>
Prefer car:
<select name = "optCar" size = "3" multiple = "multiple">
<!--making selection-->
<option> Mercedes </option>
<option> Maserrati </option>
<option selected = "selected"> Ferrari </option>
<option> Lambougini </option>
</select> <br/><br/>
<textarea name = "aspirations" rows = "3" cols = "40"> (Be brief and concise) </textarea> <br/><br/>
<input type = "Submit" name = "btnSubmit" value = "Submit Form" />
<input type = "Reset" name = "btnReset" value = "Reset Form" />
</p>
</form>
</body>
</html>
E14.png
Forms
- Form data is coded into a text string called a query string when the user clicks submit.
image.png
Audio and Video
- Three different types : Ogg, MP3, and Wav
- The most common video containers used on the Web are MPEG-4 (.mp4 files), Flash Video (.flv), Ogg(.ogv files), WebM(.webm files), and Audiio Video Interleave(.avi files).
<!-- Example #15-->
<!DOCTYPE html>
<html>
<head>
<title> Grumpy Cat - Birthday! </title>
</head>
<body>
<audio controls = "controls" >
<source src = "Happy Birthday song.ogg" />
<source src = "Happy Birthday song.wav" />
<source src = "Happy Birthday song.mp3" />
Your browser does not support the audio element
</audio>
<br/>
<video width = "600" height = "500" autoplay = "autoplay" controls = "controls" preload = "preload">
<source src = "Recording.mp4" />
<source src = "Recording.ogv" />
<source src = "Recording.webm" />
Your browser does not support the video element
</video>
</body>
</html>
Conclusions
- HTML documents have two parts : the head and the body
- Line breaks, multiple spaces and tabs are ignored by the browsers.
- Basic formatting e.g. <p>,
,<pre>,<hx> - In line elements e.g.images, controls in form, horizontal line
- Hypertext links and target within a documents.
- Unordered, ordered and definition lists
- HTML forms are sections of documents that contain controls used to collect input from the user.
