0% found this document useful (0 votes)
8 views42 pages

Lecture 1 - HTML

Uploaded by

Adin Ashby
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
0% found this document useful (0 votes)
8 views42 pages

Lecture 1 - HTML

Uploaded by

Adin Ashby
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/ 42

1

§ Evolution of HTML
§ HTML syntax & tags
§ Character Entities
§ Meta data http://richardstep.com/self-
help/survey-results-self-help-
§ Images subjects/

§ Links
§ Lists
§ Tables
§ Forms – a first look
§ <audio> & <video> element
§ <time> element

2
§ A URL is another word for a web address.

§ A URL can be composed of words (w3schools.com), or an Internet


Protocol (IP) address (192.68.20.50).
§ Most people enter the name when surfing, because names are
easier to remember than numbers.
§ Web browsers request pages from web servers by using a URL.

§ A Uniform Resource Locator (URL) is used to address a document


(or other data) on the web.

3
§ HTML is the standard markup language for creating Web pages.

§ HTML stands for Hyper Text Markup Language


§ HTML describes the structure of Web pages using markup

§ HTML elements are the building blocks of HTML pages


§ HTML elements are represented by tags

§ HTML tags label pieces of content such as heading, paragraph,


table, and so on
§ Browsers do not display the HTML tags, but use them to render the
content of the page

4
§ 1995: HTML V2.0
http://mycre8ivity.com/blog/archives/100
§ 1997: HTML V3.2 (browser wars)
§ 1999: HTML V4.01 (introduced many new features and
deprecated many older features/cascading style
sheets)
§ 2000: XHTML 1.0
§ 2001: XHTML 1.1 (Modularized 1.0, and drops frames)
§ 2009: XHTML 2.0 was stopped; W3C took over
development of HTML5
§ 2014: HTML V5.0 - designed for the web, both now and
in the future

5
§ Evolution of HTML
§ HTML syntax & tags
§ Character Entities
§ Meta data
§ Images
§ Links
§ Lists
§ Tables
§ Forms – a first look
§ <audio> & <video> element
§ <time> element

6
- Content and Structural Elements are defined by tags
- Tag format:

<element_name> opening tag


[Element content]
</element_name> closing tag

Example:

<p>This is a paragraph</p>
https://www.etsy.com/listing/123914986/ht
ml-coffee-mug-html-tags-funny-white 7
§ Not all tags have content. If a tag has no content, its form is
<element_name />

Example:
<br /> <!-- a line break -->

8
§ Some tag can have attributes
Ex: <html lang = "en">

§ Comment form:
<!-- … -->

§ Browsers ignore:
comments unrecognized tags
multiple spaces tabs

9
§ List all the HTML tags you can find
<!DOCTYPE html>
<!– hello.html A document -->
<html lang = “en”>
<head>
<title>Our first document</title>
</head>
<body>
<p> Hello World! </p>
</body>
</html> 10
<!DOCTYPE html>
<!-- File Name and purpose -->
<html lang = ″en″>
<head>
<title> Document title</title>
</head>
<body>
………
</body>
</html>
11
§ Text is normally placed in paragraph elements <p>

§ The <p> tag


§ breaks the current line
§ inserts a blank line

§ Thenew line gets the beginning of the content of the


paragraph

12
<!DOCTYPE html>
<!-- Helloworld.html A HTML document -->
<html lang = ″en″>
<head>
<title> Our first document </title>
</head>
<body>
<p>
Hello World!
</p>
</body>
</html>
13
<p></p>
§ Defines a paragraph

<br />
§ Defines a line break
§ This tag is not paired. Note the position of the /

<pre></pre>
§ Normally multiple white space is reduced to a single
space and line breaks are ignored
§ This tag tells the browser to not do this
§ Text in a pre element is shown in a fixed-width font

14
<!DOCTYPE html>
<html>
<body>
<pre>
Text in a pre element is displayed in a fixed-width font,
and it preserves both spaces and line breaks.

</pre>
</body>
</html>

Output?

15
<h1>...</h1>, <h2>...</h2>, <h3>...</h3>,
<h4>...</h4>, <h5>...</h5>, <h6>...</h6>

§ Denotes 1st , 2nd , 3rd, 4th , 5th , 6th level of headers

16
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
Output?
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
<p><b>Tip:</b> Use h1 to h6 elements only for headings. Do not use
them just to make text bold or big. Use other tags for that.</p>
</body>
18
</html>
<em></em>
§ Emphasis text
§ Generally makes it italic

<strong></strong>
§ In HTML5 defines important text
§ Generally makes it bold

<sub></sub>
§ Defines subscript text

<sup></sup>
§ Defines superscript text
19
<!DOCTYPE html>
<html>
<body>
<p>He named his car <i>The lightning</i>. </p>
<em>Emphasized text</em>
<strong>Strong text</strong>
<p>This text contains <sub>subscript</sub> text.</p>
<p>This text contains <sup>superscript</sup> text.</p>
</body>
</html>

Output?

21
§ Evolution of HTML
§ HTML syntax & tags
§ Character Entities
§ Meta data
§ Images
§ Links
§ Lists
§ Tables
§ Forms – a first look
§ <audio> & <video> element
§ <time> element

23
Special characters are denoted with &XXX;
§ Where XXX is a number or html name

§ &#34; and &quot; both mean the " character

24
Char. Entity Meaning
& &amp; Ampersand
< &lt; Less than
> &gt; Greater than
" &quot; Double quote
' &apos; Single quote
¼ &frac14; One quarter
For a complete list go to:
½ &frac12; One half
http://www.w3schools.com/chars
¾ &frac34; Three quarters ets/ref_html_symbols.asp

/ &frasl: Fraction slash


° &deg; Degree
(space) &nbsp; Non-breaking space

© &copy; Copyright
25
€ &euro; Euro
<!DOCTYPE html>
<html>
<body>
<pre>
<code>
Output?
x=5
if x &lt; 10:
print(x)
</code>
</pre>
</body>
</html>
27
§ Evolution of HTML
§ HTML syntax & tags
§ Character Entities
§ Meta data
§ Images
§ Links
§ Lists
§ Tables
§ Forms – a first look
§ <audio> & <video> element
§ <time> element

28
§ The <meta> tag defines metadata about an HTML document.
§ Metadata is data (information) about data.
§ Often used to provide info about document to search engine
§ <meta > tag is used within <head>

§ <meta > has attributes "name" and "content"


§ Examples:
<meta name="Author" content= "Mickey Mouse" >
<meta name="Keywords" content="XHTML, CSS, Javascript" >

§ <meta > has attributes ”charset”, which specifies the character encoding
for the HTML document
§ Examples:
<meta charset = ″utf-8″ />
utf-8 - Character encoding for Unicode.

29
<!DOCTYPE html>

<html> Output:
<head>

<meta charset="UTF-8">
<meta name="description" content="Web Examples">

<meta name="keywords" content="HTML, CSS, JavaScript">

<meta name="author" content=”Zixi">


<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>
<body>

<p>All meta information goes in the head section...</p>

</body>
</html>
30
§ Evolution of HTML
§ HTML syntax & tags
§ Character Entities
§ Meta data
§ Images
§ Links
§ Lists
§ Tables
§ Forms – a first look
§ <audio> & <video> element
§ <time> element

31
§ Images objects are added with the <img> tag

§ Must have the src and alt attributes

<img src= "logoc.png"


alt="My favourite image" width= "200" height= "200" >

32
33

Source file location

<img alt="White Chocolate Mocha“


src="http://globalassets.starbucks.com/assets
/65a17390467943bc99143508a44be6e9.jpg"
width = "200" height = "200">

Display this text if browser does not


display images

Size in pixels
§ GIF (Graphic Interchange Format)
§ 8-bit color (256 different colors)

§ JPEG (Joint Photographic Experts Group)


§ 24-bit color (16 million different colors)
§ Both use compression, but JPEG compression is better

§ PNG (Portable Network Graphics)


§ Relatively new
§ Should eventually replace both gif and jpeg
§ Files are bigger than jpeg – no lost data!

§ Other formats
§ bmp, tif, eps

34
<!DOCTYPE html>
<html lang ="en“>
<head>
<meta charset="utf-8">
<title> Images </title>
</head>
<body>
<h1> My favorite coffee </h1>
<h2> at Starbuck </h2>
<p>We pour …… sweetness.</p>
<br />
<img alt="White Chocolate Mocha"
src="http://globalassets.starbucks.com/assets/65a17390467943bc99
143508a44be6e9.jpg">
<br />
<p> Yum yum!</p>
</body> WhiteChocolateMoccha.html
35
</html>
§ Evolution of HTML
§ HTML syntax & tags
§ Character Entities
§ Meta data
§ Images
§ Links
§ Lists
§ Tables
§ Forms – a first look
§ <audio> & <video> element
§ <time> element

36
<a></a>
§ Calledthe anchor tag, it links to another resource
§ href attribute is required and indicates the resource

1. <a href="http://www.domain.tld/myimage.png">URL path</a>

2. <a href="myimage.png">Relative path</a>

3. Image as a link
<a href= "a link“>
<img src = “myimage.jpg" alt=" my image is not shown">
</a>

37
§ Specifies where to pen the new document

§ _blank: Opens the link in a new window or tab


§ _self: Opens the link in the same window
§ _parent: Opens the link in the parent frame
§ _top: Opens the link in the full body of windows

§ Example:
§ <a href="https://www.concordia.ca/" target="_blank">
Visit Concordia University!
</a>

38
<!DOCTYPE html>
<html>
<body>
<h2>Image Links</h2>
<p>The image is a link. You can click on it.</p>
<a href="https://www.concordia.ca/">
<img src=“logoc.png” alt=“Concordia Logo”
style="width:405px;height:124px;">

</a>
</body>
</html> 39
Source file location or url relative
path is preferred

<a href = "


http://www.concordia.ca/academics/undergradu
ate/calendar.html">
Undergraduate calendar</a>

Text content

Hypertext reference
40
41

Email address

<a href = "


mailto:zixi.quan@concordia.ca?SUBJECT=SOEN287">
Email me your questions</a>

Text content

Hypertext reference
§ Evolution of HTML
§ HTML syntax & tags
§ Character Entities
§ Meta data
§ Images
§ Links
§ Lists
§ Tables
§ Forms – a first look
§ <audio> & <video> element
§ <time> element

42
§ Data is normally listed as ordered or unordered
§ <ul> starts an unordered list
§ <ol> starts an ordered list

§ List items are enclosed in <li>


<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>

43
<!DOCTYPE html>
<html>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body> 44
</html>
§ Used to define terms,
§ List items are separated: “term” and “definition”
§ <dl> defines the definition list
§ <dt> encapsulates the term
§ <dd> encapsulates the definition

Example:
<dl>
<dt>Term 1</dt>
<dd>Definition of term 1</dd>
<dt>Term 2</dt>
<dd>Definition of term 2</dd>
</dl>

45
<h2>Definitions</h2>
<dl>
<dt>My name</dt>
<dd>Zixi Quan</dd>
<dt> SOEN 287</dt>
<dd>Web programming</dd>
</dl>

Definitions

My name
Zixi Quan
SOEN 287
Web programming
46

You might also like