一. Website layers

二.Some definitions

What is HTML?

• HTML (Hypertext Markup Language)超文本標記語言
• HTML consists of lines of text with embedded markup tags that specify Web-page formatting and links to other pages
• Describes the contentand structureof a web page using tags;
• not a programming language.
• Invented by Tim Berners-Lee at CERN in 1989
• Made up of building blocks called elements.

What is Markup?

• A markup language is simply a way of annotating a document in such a way to make the annotations distinct from the text being annotated.標記語言只是對文檔進行註釋的一種方式，這種方式可以使註釋區別於被註釋的文本。
• Combines text and extra information about the text. The extra information, for example about the text’s structure or presentation, is expressed using markup.
組合文本和關於文本的額外信息。額外的信息，例如關於文本結構或表示的信息，是用標記表示的。

What is the W3C?

• Main standards organisation for the World Wide Web.
• To promotes compatibility the W3C produces recommendations (also called specifications).
• In 1998, the W3C turned its attention to a new specification called XHTML 1.0, which was a version of HTML that used stricter XML (Extensible MarkupLanguage) syntax rules.

三. HTML Topics

HTML Document Structure

HTML documents are composed of textual content and HTML elements.HTML文檔由文本內容和HTML元素組成。
• HTML documents have two sections:
– Header
– Contains information about the document – The < head> … < /head> element defines the head
– Body
• Contains the actual document content
• The < body> … < /body>element defines the body
• Standard HTML tags are not case sensitive
– < HEAD> is the same as < Head>
– Content within the tag is case sensitive

Elements and Attributes

• Consist of three parts
– Begin tag, which can contain attributes
– Contents
– End tag
• Example: < p id=“intro”>Welcome< /p>
• HTML element: can contain text, other elements, or be empty. • It is identified in the HTML document by tags (e.g. < >).
• HTML attribute is a name=value pair that provides more information about the HTML element.
• In XHTML, attribute values had to be enclosed in quotes; in HTML5, the quotes are optional.
• Comment form: <!-- …—>
• Browsers ignore comments, unrecognisable tags, line breaks, multiple spaces, and tabs

HTML Tags

• HTML tags are the hidden keywords within a web page that define how your web browser must format and display the content.
• Format:< html> < /html>
• Most tags must have two parts, an opening and a closingpart
• Some exceptions are without closing tags:< img >

HTML Simple page

<!DOCTYPE html> 
<html> 
 <head lang="en"> 
  <meta charset="utf-8"> 
  <title>Hello World</title> 
 </head> 
 <body> 
  <p> Hello HTML5 World EBU6305! </p> 
 </body> 
</html>

HTML Attributes

• Attributes provide additional information about HTML elements.
• All HTML elements can haveattributes
• Attributes provide additional information about anelement
• Attributes are always specified in the starttag
• Attributes usually come in name/value pairs like: name=“value”

<img src="img_girl.jpg" width="500" height="600“ alt=“alternate description”> <a href= "https://www.w3schools.com" >This is a  link</a> 
<p style="color:red">I am a paragraph</p>

Always only used in the element begin tag
• Three types
– Optional attributes: Varies with element type
– Standard attributes: id, class, title, style, dir, lang, xml:lang
– Event attributes: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup
• Used in scripting

Empty Elements

• Some elements have no content and therefore also have no end tag
– < img src=“photo.jpg” />
– < br />
– < hr />
– < link rel=“stylesheet” type=“text/css” href=“main.css" />
• In XHTML, which requires end tags on all elements, a single tag represents both the begin and end tag

Tag Attributes

• Tags can have properties called attributes
–Examples:
• < body> tag has a bgcolor attribute that allows you to specify the page body background color
• heading and paragraph tags have an align attribute that allows you to control text alignment
• Specify tag attributes using the following format:

四.Essential HTML Elements

Essential HTMLElements

• < !DOCTYPE html>: declare document type
•Essential elements: a web page must have them to be valid:
• < html>< /html>
• identifies the beginning and end of the HTMLdocument.
• all other tags must fall between the html tags.
• < head>< /head>
• contains information about the document that will not appear on the actual page: title, author, stylesheet, meta tags etc.
• < title>< /title>
• defines the title that will appear in the title bar of your web browser
• must appear between the head tags
• < body>< /body>
• contain all the information and other visible content on the page
• all images, links and plain text must go between the body tags

HTML < head > element

The < head> element is a container for metadata (data about data) and is placed between the < html> tag and the < body> tag

HTML < title >element

• The < title > element defines the title of the document, and is required in all HTML documents.
• The < title >element:
• defines a title in the browsertab
• provides a title for the page when it is added tofavourites
• displays a title for the page in search engineresults

HTML < style > element

The < style > element is used to define style information for a single HTML page

HTML < link >element

• The < link > element is used to link to external style sheets.

HTML < meta >element

The < meta > element is used to specify which character set is used, page description, keywords, author, and other metadata.
• Define the character set used: <metacharset=“UTF-8”>
• Set the viewpoint: how to control the page’s dimensions andscaling < meta name=“viewport” content=“width=device-width,initial-scale=1.0”>

HTML < script >element

五.Other HTML Elements

HTML Headings

HTML Paragraphs

HTML Links

HTML Images

HTML Tables

HTML iframes

HTML Forms

HTML Block and Inline Elements

•Every HTML element has a default display value depending on what type of element it is: block or inline
• A block-level element always starts on a new line and takes up the full width available.
•< div > defines a section/container in a document(block)
• The < div > element is often used as a container for other HTML elements • The

element has no required attributes, but style, class and id are common • When used together with CSS, the < div> element can be used to style blocks of content

An inline element does not start on a new line and only takes up as much width asnecessary
• < span > defines a section in a document(inline)
• The < span> element is often used as a container for some text.
• The < span> element has no required attributes, but style, class and id are common.
• When used together with CSS, the < span> element can be used to style parts of the text.

六.Semantic語義學的

Semantic Markup

• A semantic element clearly describes its meaning to both the browser and the developer
• Structure is vital
• We will examine tags that describe the basic structural information
• e.g. Articles, headings, lists, paragraphs, links, navigation, footers

Semantic Markup - Advantages

• Eliminating presentation-oriented markup and writing semantic HTML markup has a variety of important advantages:
• Maintainability - Semantic markup is easier to update and change than web pages that contain a great deal of presentation markup.
• Faster
• Accessibility - Visiting a web page using voice reading software can be a very frustrating experience if the site does not use semantic markup.
• Optimise the search engine.

HTML –Ordered Lists

HTML HTML -Basic Tags

Nested lists

七.Some examples

Image.html

<!DOCTYPE html> 
<html> 
 <head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
  <title>Figure</title> 
 </head> 
 <body> 
  <h1>QMUL Queen's building</h1> 
  <p>This is to display the Queen's building at QMUL.</p> 
  <figure id="fig1"> 
  <dd> 
   <imgsrc="https://www.qmul.ac.uk/media/qmul/degreeapprenticeships/queensBuilding.jpg" alt="QMUL" /> 
  </dd> 
  <dt>Figure: Queen's building</dt> 
  </figure> 
 </body> 
</html>

navigation.html

<!DOCTYPE html> 
<html> 
<head> 
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
 <title>Navigation</title> 
</head> 
<body> 
 <h1>This page displays navigation to several pages</h1> 
 <p>Navigation</p> 
 <nav id="mainNav"> 
 <ul> 
  <li><a href="https://www.qmul.ac.uk">Home</a></li> 
  <li><a href="https://www.qmul.ac.uk/about/">About</a></li> 
  <li><a href="https://www.qmul.ac.uk/research/">Research</a></li> 
  <li><a href="https://www.qmul.ac.uk/contact/">Contact</a></li> 
 </ul> 
 </nav> 
</body> 
</html>

video.html

<!DOCTYPE html> 
<html> 
 <head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
  <title>Video</title> 
 </head> 
 <body> 
  <h1>This page displays video through a weblink</h1> 
  <p>Video</p> 
  <video width="600" controls> 
   <source src="https://storage.googleapis.com/coverrmain/mp4%2FBesty.mp4" type="video/mp4" /> 
   <strong>HTML5 video element not supported</strong> 
  </video> 
 </body> 
</html>

八.一些有用的網站

codepen

W3Schools

Tutorialspoint

Interactive Media Design and Production-----HTML

HTML