1 of 52

1

Introduction to Web Technology �(CSE505)

chapter 1 / part 1

Introduction to HTML5

2 of 52

LEARNING OUTCOME

  • Understand important components of HTML5 documents.
  • Use HTML5 to create web pages.
  • Add images to web pages.
  • Create and use hyperlinks to help users navigate web pages.
  • Mark up lists of information.
  • Create tables with rows and columns of data.

2

3 of 52

Introduction

3

  • HTML5: (HyperText Markup Language 5)

​

    • markup language that specifies the structure and content of documents that are displayed in web browsers.

​

    • HTML5 markup contains text (and images, graphics, animations, audios and videos) that represents the content of a document and elements that specify a document’s structure and meaning.

4 of 52

First HTML Example

This first example displays the message Welcome to HTML! in the browser.

4

5 of 52

The <!DOCTYPE> Declaration

HTML documents must start with: Document Type Definition (DTD)

  • It tells web browsers what type is the served code
  • Not sensitive to the letter case

​

​

5

Possible versions: HTML 4.01, XHTML 1.0 (Transitional or Strict), XHTML 1.1, HTML 5

6 of 52

Blank lines

We include blank lines (lines 2 and 10) to make our documents easier to read

  • Browser ignores the blank lines

6

7 of 52

Comments: �<!-- --> Tag

  • Comments are enclosed in <!-- and -->
  • Comments can exist anywhere after <!doctype html>.
  • It used to improve readability and describe the content of a document
  • The browser ignores comments.

7

8 of 52

<html> </html> Tag

  • The <html> tag tells the browser that this is an HTML document.
  • The <html> tag represents the root of an HTML document.
  • The <html> tag is the container for all other HTML elements (except for the <!DOCTYPE> tag).

​

​

8

9 of 52

The <head> Section

- Contains information that doesn’t show directly on the viewable page

- Starts after the <html> declaration

- Begins with <head> and ends with </head>

9

  • Contains fixed <title> </title> tag (Why?)
  • Can contain some other tags, e.g.:
    • <meta>
    • <script>
    • <link>
    • <base>

10 of 52

<head> Section:�1- <title> tag

-defines a title in the browser toolbar

-provides a title for the page when it is added to favourites or Bookmarks

-displays a title for the page in search engine

10

Note: try to make the title as accurate and meaningful as possible!

11 of 52

<head> Section:�2- <Meta> tag

- Metadata is data about data.

- The <meta> tag provides (information about the HTML document.

11

12 of 52

<head> Section:�2- <Meta> tag

  • <meta> tag is used to specify
      • character encoding: the most popular character encoding scheme for the web is (UTF-8) —which helps the browser determine how to render the content
      • short description, keywords, author of the document, last modified ..etc..
      • control the viewport: The viewport is the user's visible area of a web page. It varies between the devices
  • Two necessary attributes – name & content

12

<meta charset="UTF-8">

​

<meta name="description" content="HTML tutorial"/>

​

<meta name="keywords" content="html, web design, styles"/>

<meta name="author" content=“Nada"/>

​

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

​

13 of 52

<head> Section:�2- <Meta> tag

  • A <meta> viewport element gives the browser instructions on how to control the page's dimensions and scaling.
  • The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
  • The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

​

-Here is an example of a web page with and without the viewport meta tag:

13

14 of 52

<head> Section:�3- < script > tag

  • The <script> element is used to embed scripts into an HTML document
    • Scripts are executed in the client's Web browser
    • Scripts can live in the <head> and in the <body> sections
  • Supported client-side scripting languages:
    • JavaScript
    • VBScript

14

15 of 52

<head> Section:�3- < script > tag

15

<!DOCTYPE HTML>

<html>

<head>

<title>JavaScript Example</title>

<script type="text/javascript">

function sayHello() {

document.write("<p>Hello World!<\/p>");

}

</script>

</head>

<body>

<script type=

"text/javascript">

sayHello();

</script>

</body>

</html>

16 of 52

<head> Section:�4- < style > tag

16

<html>

<head>

<style type="text/css">

p { font-size: 12pt; line-height: 12pt; }

p:first-letter { font-size: 200%; }

span { text-transform: uppercase; }

</style>

</head>

<body>

<p>Styles demo.<br />

<span>Test uppercase</span>.

</p>

</body>

</html>

17 of 52

<body> Section

17

  • The <body> section describes the viewable portion of the page

​

  • Starts after the <head> </head> section

​

  • Begins with <body> and ends with </body>

​

18 of 52

The Heading Element

18

<h1> to <h6> Define headers

<h1> defines the largest header

<h6> defines the smallest header

​

​

​

​

​

​

<h1>Heading Level 1</h1>

<h2>Heading Level 2</h2>

<h3>Heading Level 3</h3>

​

19 of 52

<p> ,<br/> tags

19

  • Paragraph Element (<p>...</p>)tag
    • <p> …paragraph goes here… </p>
    • empty space above and below the paragraph

​

  • line break <br/> tag
    • …text goes here <br>
    • This starts on a new line….

Example

<p>Contact<br />� 6150 Sennott Square<br />� University of Pittsburgh<br>� Pittsburgh, PA 15260</p>

20 of 52

Text Formatting

  • Text formatting tags modify the text between the opening tag and the closing tag
  • Ex. <b>Hello</b> makes “Hello” bold

20

21 of 52

Text Formatting (Example)

21

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Untitled Document</title>

</head>

<body>

<b> Hello#1 </b>

<em> Hello#2 </em>

<i> Hello#3 </i>

<u> Hello#4 </u>

<del> Hello#5 </del>

<sup> Hello#6 </sup>

<sub> Hello#7 </sub>

<pre> Hello#8 </pre>

<blockquote>Hello#9</blockquote>

</body>

</html>

Output:

22 of 52

Text Formatting (Another Example)

22

Output:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Untitled Document</title>

</head>

<body>

<h1>Notice</h1>

<p>This is a <em>sample</em> Web page.</p>

<p><pre>Next paragraph:

preformatted.</pre></p>

<h2>More Info</h2>

<p>Specifically, we’re using XHMTL 1.0 transitional.<br />

Next line.</p>

</body>

</html>

23 of 52

Attributes, Links, Images,�Lists, and Tables

23

24 of 52

Links & Anchor Element <a>

24

  • Use <a > (anchor) tag to create a link
  • Specifies a hyperlink reference (href) to a file or URL
  • Click on a specially marked word or image on a web page and automatically be jumped to:
    • Absolute link (External link)
      • Link to other websites
        • Ex:
    • Relative link (Internal link)
      • Link to pages on your own site
        • Ex:
      • Relative to the current page
        • Ex:

<a href="http://yahoo.com " target="_blank" >Yahoo</a>

<a href="index.html">Home</a>

​

<h2 id="section1">Intro</h2>

<a href="#section1">Goto intro</a>

25 of 52

Links & Anchor Element <a>

  • target="_blank" opens the link in a new window

​

​

  • target="_self" : Open the link in the current frame.

​

​

​

  • Link to an e-mail address:

​

25

<a href="http://yahoo.com" target="_blank">Yahoo</a>

<a href="mailto:me@hotmail.com">me@hotmail.com</a>

<a href="http://yahoo.com" target=“ _self ">Yahoo</a>

26 of 52

Links to the Same Document – Example

26

<h1>Table of Contents</h1>

<p> <a href="#section1"> Introduction </a> <br/>

<a href="#section2">Some background</a> <br/>

<a href="#section3">Project History</a> <br/>

...the rest of the table of contents... </p>

<!-- The document text follows here -->

<h2 id="section1">Introduction</h2>

... Section 1 follows here ...

<h2 id="section2">Some background</h2>

... Section 2 follows here ...

<h3 id="section3 ">Project History</h3>

... Section 3 follows here ...

27 of 52

Images:<img> tag

  • Inserting an image with <img> tag:

​

​

  • Image attributes:

27

<img src="url" alt="some_text"  width="width" height= "height " >

src

Location of image file (relative or absolute)

alt

Substitute text for display (e.g. in text mode)

height

Number of pixels of the height

width

Number of pixels of the width

border

Size of border, 0 for no border

28 of 52

Images:<img> tag

  • Images in same Folder

​

​

  • Images in Another Folder

​

​

  • Image as a Link

​

28

<img src="html5.gif" alt="HTML5 icon" width="300" height="300" >

<a href="default.asp">  

<img src="html5.gif" alt="HTML5 icon" width="300" height="300" >

</a>

<img src="imeges/html5.gif" alt="HTML5 icon" width="300" height="300" >

29 of 52

Lists types:

  • Unordered list (ul)

- Bulleted items.

​

  • Ordered list (ol)

- Numbered items.

​

  • Definition List(dl)

-a list of items, with a description of each item.

​

Note: Browser inserts a blank line before & after the list (block-level element)

​

29

30 of 52

Ordered Lists: <ol> Tag

<ol type="1">

<li>Apple</li>

<li>Orange</li>

<li>Grapefruit</li>

</ol>

Attribute values for type are:

1, A, a, I, or I

Note: 1 is the default value

30

  1. Apple
  2. Orange
  3. Grapefruit
  1. Apple
  2. Orange
  3. Grapefruit
  1. Apple
  2. Orange
  3. Grapefruit
  1. Apple
  2. Orange
  3. Grapefruit
  1. Apple
  2. Orange
  3. Grapefruit

31 of 52

Unordered Lists: <ul> Tag

<ul type=" circle ">

  <li>Apple</li>

  <li>Orange</li>

  <li>Grapefruit</li>

</ul>

Attribute values for type are:

disc, circle and square

Note: square is the default value

31

  • Apple
  • Orange
  • Pear
  • Apple
  • Orange
  • Pear
  • Apple
  • Orange
  • Pear

32 of 52

Definition lists: <dl> tag

<dl>

<dt>HTML</dt>

<dd>A markup language ..</dd>

<dt>CSS</dt>

<dd>Language used to … </dd>

</dl>

32

  • Create definition lists using <dl>
    • Pairs of text and associated definition;
    • text is in <dt> tag (defines text), definition in <dd> tag (definition descriptions)
    • Renders without bullets
    • Definition is indented

33 of 52

HTML Special Characters

33

£

&pound;

British Pound

€

&#8364;

Euro

"

&quot;

Quotation Mark

¥

&yen;

Japanese Yen

—

&mdash;

Em Dash

&nbsp;

Non-breaking Space

&

&amp;

Ampersand

>

&gt;

Greater Than

<

&lt;

Less Than

™

&trade;

Trademark Sign

®

&reg;

Registered Trademark Sign

©

&copy;

Copyright Sign

Symbol

HTML Entity

Symbol Name

34 of 52

Tables

  • Tables are frequently used to organize data into rows and columns.
  • <table> element defines an HTML5 table.
  • <caption> element specifies a table’s title.

34

35 of 52

Tables

A table can be split into three distinct sections:

    • <thead> Declare the Table Head
      • Table titles
      • Column headers
    • <tbody> Declare the Table Body .
      • Primary table data
    • <tfoot> Declare the table footer
      • Calculation results
      • Footnotes

Note: Even if the tfoot section in the code was before the tbody, the tfoot content will display at the bottom in the table.

- Same applies on thead it always comes on the top of the table

35

36 of 52

Tables

36

Element

Definition

<tr>

Defines individual table rows

<th>

Defines a header cell

<td>

Contains table data elements.

<tr>

<tr>

<th>

<th>

<td>

<td>

37 of 52

Tables

Table with Header & Border

<table border="1" >�<tr>� <th>Header 1</th>� <th>Header 2</th>�</tr>

�<tr>� <td>row 1, cell 1</td>� <td>row 1, cell 2</td>�</tr>�</table>

Tables without Header & Borders

<table border="0" >

<tr>

<td>row 1, cell 1</td>

<td>row 2 , cell 2</td>

</tr>

<tr>

<td> row 2, cell 1 </td>

<td> row 2, cell 2 </td>

</tr>

</table>

37

row 1, cell 1

row 1, cell 2

row 2, cell 1

row 2, cell 2

38 of 52

Tables in summary

38

39 of 52

Table - Example

39

40 of 52

Table – Example cont..

40

41 of 52

Table – Example cont..

41

42 of 52

  • Tables have two attributes related to space:

42

  • cellpadding

​

​

​

​

  • Defines the empty space around the cell content
  • cellspacing

​

​

​

​

  • Defines the empty space between cells

cell

cell

cell

cell

cell

cell

cell

cell

Cell Spacing and Padding

43 of 52

Cell Spacing and Padding- Example

43

<table cellspacing="15" cellpadding="0">

<tr>

<td>First</td>

<td>Second</td>

</tr>

</table>

<br/>

<table cellspacing="0" cellpadding="10">

<tr>

<td>First</td>

<td>Second</td>

</tr>

</table>

44 of 52

Row and Column Spans

  • You can MERGE data cells with the rowspan and colspan attributes
  • The values of this attributes specify the number of rows or columns occupied by the cell.
  • Can be placed inside any data cell or table header cell.

44

45 of 52

45

  • rowspan

​

​

​

​

​

  • Defines how many rows the cell occupies
  • colspan

​

​

​

​

​

  • Defines how many columns the cell occupies

Row and Column Spans

​

​

​

​

​

cell[1,1]

cell[1,2]

cell[2,1]

colspan="1"

colspan="1"

colspan="2"

cell[1,1]

cell[1,2]

cell[2,1]

rowspan="2"

rowspan="1"

46 of 52

Row and Column Spans - Example

46

<table cellspacing="0">

<tr>

<td>Cell[1,1] </td>

<td colspan="2">Cell[2,1]</td>

</tr>

<tr>

< td >Cell[1,2]</td>

<td rowspan="2">Cell[2,2]</td>

< td >Cell[3,2]</td>

</tr>

<tr>

<td>Cell[1,3]</td>

<td>Cell[2,3]</td>

</tr>

</table>

Could you predict the output ?

Cell[2,3]

Cell[1,3]

Cell[3,2]

Cell[2,2]

Cell[1,2]

Cell[2,1]

Cell[1,1]

47 of 52

Using <div> & <span> �block & inline elements

47

48 of 52

Block and Inline Elements

  • Block elements:
    • Add a line break before and after them
    • Define a complete section or block of text
    • Ex:  <div>, <h1> , <h6>, <p>, <form>,< ul>, <ol>, <li>, <table>, <tr>, <th> <nav>
  • Inline elements
    • Define the structure of a sequence of characters within a line
    • Ex: <span>, <a>, <img>

48

49 of 52

The <div> Tag

  • <div> creates logical divisions within area of a web page
  • create a separate area
  • Block display with empty space above and below the div

49

<div style="backgroundcolor:black;color:white;padding:20px;">

<h2>London</h2>

<p>London is the capital city of England...</p>

<p>Standing on the River Thames, London has...</p>

</div>

50 of 52

The <span> Tag

  • <span> Inline style element
  • Used for modifying a specific portion of text
  • Don't create a separate area
  • <span> used both style and class  attributes with CSS

50

<h1> My <span style="color:red">Important</span> Heading</h1>

51 of 52

The <nav> Tag

  • The <nav> tag defines a set of navigation links.
  • Notice that NOT all links of a document should be inside a <nav> element.
  • The <nav> element is intended only for major block of navigation links.

51

52 of 52

To Explore .. (Self driven learning activity).

  • Using Google search, find out how to add video from online resource (E.g YouTube) to html page
  • Find out how to add map (Google MAP) to the web page

52