Scribd
Upload
5 views

2.1-HTML

This document provides an overview of HTML5, including its basic syntax, text markup elements, and the client-server architecture. It covers essential topics such as images, hypertext links, lists, tables, and forms, along with examples of HTML code. Additionally, it discusses tools for learning HTML5 and CSS, as well as important HTML character entities and link attributes.

Uploaded by

pratyakshp26can
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

2.1-HTML

This document provides an overview of HTML5, including its basic syntax, text markup elements, and the client-server architecture. It covers essential topics such as images, hypertext links, lists, tables, and forms, along with examples of HTML code. Additionally, it discusses tools for learning HTML5 and CSS, as well as important HTML character entities and link attributes.

Uploaded by

pratyakshp26can
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 48

SOEN 287

Chapter 2: HTML (1)

Dr. Yuhong Yan


1 CSE, Concordia University
Winter, 2025
Jan 16, 2025 Objectives
 The principle of markup language
 The minimal HTML5 file

 The Basic Text Tags


 Paragraph <p>
 Headings <h1>, <h2>, …, <h6>
 The client-server architecture

2
HTML5 Topics
 Introduction of Basic Syntax
 Basic Text Markups

 Images

 Hypertext links

 Lists

 Tables

 Forms

 Audio

 Video

 Organization elements

 Time

3
References
 References to all the HTML tags
 http://www.w3schools.com/
 https://developer.mozilla.org/en-
US/docs/Web/HTML/Reference?utm_source=chatgpt.
com

4
Tools you need for learning HTML5 and CSS5
 An IDE or a plain text editor
 IDE: VS Code + github copilot
 Text editors:
 Brackets (Mac)
 GNU Emacs editor

 Notepad ++

 A browser
 Run client side code
 Developer tools: code inspector, network, command line
 Google chrome, FireFox, MS Edge
 You do not need a web server

5
Hello World in HTML5

<!DOCTYPE html>
<!-- greet.html A trivial document -->
<html lang = "en">
<head> <title> Our first document </title>
<meta charset="utf-8">
</head>
<body>
<p>
Hello World with HTML!
</body>
</html>

6
Load the greet.html into a browser

7
Understand what is a mark up language

<!DOCTYPE html>
<!-- greet.html A trivial document -->
<html lang = "en">
<head> <title> Our first document </title>
<meta charset="utf-8">
</head>
<body>
<p>
Hello World with HTML!
</p>
</body>
</html> chap2/greet.html
8
Understand what is a mark up language

<!DOCTYPE html> Document type declaration


<!-- greet.html A trivial document --> Comment

<html lang = "en">


<head> <title> Our first document </title>
<meta charset="utf-8">
</head> Attribute
Content
<body>
<p> opening tag
Hello World with HTML element element
</p> Closing tag
</body>
</html>
chap2/greet.html
9
Understand what is a mark up language
 The tags are commands
 How to display (the styles)
 Color, format, location etc.
 The comment of tags is display
 The elements (tag + its content) are turned into objects
in web browser when the html is loaded
 Use javascript to access and/or manipulate the objects
 By changing the attributes of the objects

10
With external CSS and JavaScript files

<!DOCTYPE html>
<!-- greet.html A trivial document -->
<html lang = "en">
<head>
<meta charset="utf-8">
<title> Our first document </title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
</body>
</html>

11
Minimal HTML5 file

<!DOCTYPE html>
<html lang = "en">
<head> <title> Our first document </title>
<meta charset="utf-8">
</head>
<body>
</body>
</html>

12
HTML5 Validator
 https://validator.w3.org/

13
Basic Text Markups

14
Paragraph Elements <p>
-Text is normally placed in paragraph elements
- breaks the current line and inserts a blank line

<!DOCTYPE html>
<!-- greet.html A trivial document -->
<html lang = "en" >
<head> <title> Demo Paragraph</title>
</head>
<body>
<p> Greetings from your Webmaster! </p>
<p> This is the second paragraph. </p>
</body>
</html>

chap2/p1.html

15
Load greet.html into Browser

16
Line breaks <br>
- No closing tag!
- Breaks the current line, inserts No blank line

<!DOCTYPE html>
<!-- greet.html A trivial document -->
<html lang = "en" >
<head> <title> Our first document </title>
</head>
<body>
<p> Greetings from your Webmaster! </p>
<p> This is the second paragraph. <br> We continue the second
paragraph.</p>
</body>
</html>

chap2/br.html
17
Load br.html into Browser

18
Preserving whitespace <pre>
- The text content of a element is displayed as it is entered

<p> without using pre:<br>


Mary
Had a
little
lamb
</p>
<p>using pre:<br> <pre>
Mary
Had a
little
lamb </pre>
</p>
chap2/pre.html
19
Load pre.html into Browser

20
Headings <h1> <h2> <h3> <h4> <h5> <h6>
- 1, 2, and 3 use font sizes that are larger than the default font
size
- 4 uses the default size
- 5 and 6 use smaller font sizes

<body>
<h1> Aidan’s Airplanes (h1) </h1>
<h2> The best in used airplanes (h2) </h2>
<h3> "We’ve got them by the hangarful" (h3)
</h3>
<h4> We’re the guys to see for a good used
airplane (h4) </h4>
<h5> We offer great prices on great planes
(h5) </h5>
<h6> No returns, no guarantees, no refunds,
all sales are final (h6) </h6>

<p> the default font for text, <b> the default bold
font for text</b></p>

</body> chap2/ headings.html


21
HTML Formatting Elements
 <b> - Bold text
 <strong> - Important text, most browsers use bold

 <i> - Italic text

 <em> - Emphasized text, most browsers use italic for


content
 <mark> - Marked text

 <small> - Smaller text

 <del> - Deleted text

 <ins> - Inserted text

 <sub> - Subscript text

 <sup> - Superscript text

 <code> - for program code, often set in Courier


22
HTML Formatting Elements - Examples

<p>
<i> this is italic</i> <br>
<b> this is bold</b> <br>
<em> this is em</em> <br>
<strong> this is strong </strong> <br>
<code> this is code </code>
</p>
<p>
x<sub>2</sub><sup>3</sup>+y<sub>1</sub><sup>2</sup>
</p>

chap2/fonts_my.html
23
HTML Style

 Now, more and more done with cascading style sheets


(CSS)
 Introducing CSS the HTML style attribute (Also in
Chapter 3)

<tagname style="property:value;">

For example
this is <span style=“font-style:italic"> italic </span>

chap2/ fonts_my_style.html

chap2/ my_style.html
24
The HTML charset Attribute
 <meta charset="UTF-8">

 From ASCII to UTF-8


 ASCII defines 128 different characters
 ISO-8859-1 is the default character set for HTML4
 ANSI: Windows character set
 Character A, B, C
 Type the characters: A B C
 Use their encodings: &#65; &#66; &#67;

25
ASCII table

26
Unicode
 Chinese, Japanese, Tibetan, Arabic, …
 Ancient characters

 Emoji

Characters Unicode In computer


128514 ?

128513 ?

27
UTF-32

28
UTF-8

Code in decimal Code in binary Code used in Computer

w, x, y represent 0 or 1

29
UTF-8

30
The HTML Character Entities
Result Description Entity Name Entity Number

non-breaking space &nbsp; &#160


< less than &lt; &#60;
> greater than &gt; &#62;
& ampersand &amp; &#38;
" double quotation mark &quot; &#34;
' single quotation mark &apos; &#39;
(apostrophe)
¢ cent &cent; &#162;
€ euro &euro; &#8364;
© copyright &copy; &#169;
® registered trademark &reg; &#174;

31
The HTML Character Entities (2)
Result Description Entity Name Entity Number

° degree sign &deg; &#176;


¼ one quarter &frac14 &#188;
½ One half &frac12 &#189;
¾ Three quarters &frac34 &#190;

&#128512;
&#128516;
&#128525;
&#128151;

32
Emojis
 UTF-8 covers almost all of the characters and symbols
in the world
 Emojis are also characters from the UTF-8 alphabet:
 is 128516
 is 128525
 is 128151

 https://www.w3schools.com/html/html_emojis.asp

33
Blockquotes <blockquote>
- To set a block of text off from the normal flow and
appearance of text
- Browsers often indent, and sometimes italicize

<p> Abraham Lincoln … most famous speech was


delivered in Gettysburg, Pennsylvania, during
the Civil War. This speech began with
</p>
<blockquote>

Fourscore and <em> seven years </em> ago <i>our


fathers</i> brought forth on this continent, a new
nation, <b>conceived</b> <strong>in
liberty</strong>, and dedicated to the proposition
that all men are created equal.
...
</blockquote>

34
The <meta> element
(for search engines) Used to provide additional
information about a document, with attributes, not
content.

<meta name = “Title” content = “course outline”>


<meta name = “Author” content = “Yuhong Yan”>
<meta name = “Keywords” content = “cs, course, Web
programming, HTML, javascript”>

35
Important Markups
 Images
 Hypertext links

 Lists

 Tables

 Forms

36
Image tag <img /> by example
Source file location

<img src = "c210new.jpg"


alt = "Picture of a Cessna 210“
width = “600” height = “400”
align = “CENTER”>

Display this text if browser does


not display images

Size in pixels

37
Normal Image Formats
 GIF (Graphic Interchange Format)
 8-bit color (256 different colors)
 animation
 JPEG (Joint Photographic Experts Group)
 24-bit color (16 million different colors)
 Both use compression, but JPEG compression is better
 Portable Network Graphics (PNG)
 Relatively new
 Should eventually replace both gif and jpeg
 No data loss when reproduction
 Support transparent background --> for logos
 Other formats
 WebP, bmp, tiff, ico
38
An Image Example
<!DOCTYPE html>
<html lang = "en">
…
<body>
<p>
1960 Cessna 210 <br>
577 hours since major engine overhaul<br>
1022 hours since prop overhaul <br>
<img src = "images/c210new.jpg" alt = "Picture of a Cessna 210"><br>
Buy this fine airplane today at a remarkably low price <br>
Call 999-555-1111 today!
</p>
</body>
</html>

39
An Image Example (continued)

chap2/image.html
40
Hypertext links <a href = > by example
Source file location or url
relative path is preferred

<a href = "C210data.html">


Information on the Cessna 210 </a>

Text content

Hypertext reference

chap2/link.html
41
An Hypertext Link Example

<!-- link.html
An example to illustrate a link
-->
<html lang = "en">
<head> <title> Links </title>
</head>
<body>
<h1> Aidan's Airplanes </h1>
<h2> The best in used airplanes </h2>
<h3> "We've got them by the hangarful"
</h3>
<h2> Special of the month </h2>
<p>
1960 Cessna 210 <br>
<a href = "C210data.html">
Information on the Cessna 210 </a>
</p>
</body>
</html>

42
An Hypertext Link Example (Continued)

43
HTML Links – The target Attribute
 Where to open the linked document.
 The target attribute can have one of the following
values:
 _self - Default. Opens the document in the same window/tab
as it was clicked
 _blank - Opens the document in a new window or tab
 _parent - Opens the document in the parent frame
 _top - Opens the document in the full body of the window

44
A link built on an images

<a href = "c210data.html">


<img src = "smallplane.jpg"
alt = "Small picture of an airplane">
</a>

chap2/linkOnImage.html
45
Id: mark the target spot
id: the target spot

<h1 id = "baskets"> Baskets </h1>

If the id is in the same document

<a href = "#baskets"> What about baskets? </a>

If the target is in a different


document

<a href = "myAd.html#baskets"> Baskets </a>

chap2/link_bookmark.html
46
HTML Link Colors
 By default, a link will appear like this (in all
browsers):
 An unvisited link is underlined and blue
 A visited link is underlined and purple
 An active link is underlined and red
 You can change the link state colors, by using
CSS:
<style>
a:link{color: green; text-decoration: none; …}
a:visited {color: pink; …}
a:hover {color: red; text-decoration: underline; …}
a:active {color:yellow; …}

</style>
chap2/link_colors.html
47
The End

48

You might also like