Topic 3: Markup On The Front-End
& Topic 4: HTML Structure
Topic Learning Outcomes
Upon completion of this topic, students should be able to:
1. Describe understanding on HTML and HTML5.
2. Apply HTML syntax to create a simple webpage.
Topic Learning Outcomes #1
Upon completion of this chapter, students should be able to:
1. Describe understanding on HTML and HTML5.
2. Apply HTML syntax to create a simple webpage.
Introduction to HTML
HTML stands for Hyper Text Markup Language
HTML is the standard markup language for creating Web pages
HTML describes the structure of a Web page
HTML consists of a series of elements
HTML elements tell the browser how to display the content
Topic Learning Outcomes #2
Upon completion of this chapter, students should be able to:
1. Describe understanding on HTML and HTML5.
2. Apply HTML syntax to create a simple webpage.
A Simple HTML Document
<!DOCTYPE html> defines that this document is an HTML5 document
<html> root element of an HTML page
<head> contains meta information about the HTML page
<title>Page Title</title> specifies a title for the HTML page
</head>
<body> defines the document's body and visible contents
<h1>My First Heading</h1> defines a large heading
<p>My first paragraph.</p> defines a paragraph
</body>
</html>
Output
• The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read
HTML documents and display them correctly.
• A browser does not display the HTML tags, but uses them to determine how
to display the document:
HTML Page Structure
Below is a visualization of an HTML page structure:
HTML Element
• An HTML element is defined by a start tag, some content, and an end tag:
<tagname>Content goes here...</tagname>
• Example:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
• HTML Attributes - provide additional information about elements
• Example:
<a href="[Link]
element attribute value
HTML Element (cont’d)
Headings <h1> … <h6>
• Titles or subtitles displayed on a webpage.
• Example: Output:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
HTML Element (cont’d)
Paragraphs <p>
• A paragraph always starts on a new line, and browsers automatically add
some white space (a margin) before and after a paragraph.
• Example: Output:
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
HTML Element (cont’d)
Horizontal Rules <hr>
• A thematic break in an HTML page.
• Example: Output:
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
HTML Element (cont’d)
Line Breaks <br>
• Defines a line break without starting a new paragraph.
• Example:
<p>This is<br>a paragraph<br>with line breaks.</p>
Output:
HTML Element (cont’d)
Style Attribute
• Setting the style of an HTML element, can be done with the style attribute.
<tagname style="property:value;">
• The property is a CSS property. The value is a CSS value.
• Example:
<body style="background-color:powderblue;">
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
<p style="font-family:courier;">This is a paragraph.</p>
<h2 style="text-align:center;">Centered Heading</h2>
<p style="font-size:160%;">This is a paragraph.</p>
HTML Element (cont’d)
Text Formatting
• HTML contains several elements for defining text with a special meaning.
<b>This text is bold</b>
<strong>This text is important!</strong>
<i>This text is italic</i>
<em>This text is emphasized</em>
<small>This is some smaller text.</small>
<p>Do not forget to buy <mark>milk</mark>today.</p>
<p>My favorite color is <del>blue</del> red.</p>
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
<p>This is <sub>subscripted</sub> text.</p>
<p>This is <sup>superscripted</sup> text.</p>
HTML Element (cont’d)
Output:
HTML Comments
• HTML comments are not displayed in the browser, but they can help
document your HTML source code.
<!-- Write your comments here -->
• Example:
<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Remember to add more information here -->
HTML Links - Hyperlinks
• Links allow users to click their way from page to page and jump to another
document.
Syntax: <a href="url">link text</a>
• Example:
<a href=“[Link]
target=“_blank”>Visit CIMB Clicks</a>
• The target attribute specifies where to open the linked document.
_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
HTML Links - Hyperlinks
• Use an Image as a Link
Syntax: <a href="[Link]">
Example:
<img src="[Link]" alt="HTML
tutorial" style="width:42px;height:42px;"></a>
• Link to an Email Address
<a href="[Link] email</a>
• Button as a Link - add some JavaScript code
<button onclick="[Link]='[Link]'">
HTML Tutorial</button>
HTML Image
• Images can improve the design and the appearance of a web page.
• Syntax: <img src="url" alt="alternatetext">
• Example:
<img src="img_girl.jpg" alt="Girl in a jacket"
width="500" height="600">
src attribute specifies the path (URL) to the image
alt attribute provides an alternate text for an image
width, height - specify the width and height of an image
HTML Image (cont’d)
Output:
HTML Image (cont’d)
Common Image Formats
Background Images
• Background Image on a Page
Background Images (cont’d)
• Background Image on a HTML element
HTML Tables
• HTML tables allow web developers to arrange data into rows and columns.
HTML Tables (cont’d)
Output:
HTML Lists
• HTML lists allow web developers to group a set of related items in lists.
• Unordered List - list items will be marked with bullets by default
• Example:
<ul> Output:
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
HTML Lists (cont’d)
The CSS list-style-type property is used to define the style of the list item
marker.
<ul style="list-style-type:disc;">
<ul style="list-style-type:circle;">
<ul style="list-style-type:square;">
<ul style="list-style-type:none;">
HTML Lists (cont’d)
• Ordered List - list items will be marked with numbers by default
• Example:
<ol> Output:
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
HTML Lists (cont’d)
• The type attribute of the <ol> tag, defines the type of the list item marker
<ol type="A">
<ol type="a">
<ol type="I">
<ol type="i">
HTML Lists (cont’d)
• Description Lists - list of terms, with a description of each term
• Example:
<dl> Output:
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
HTML Lists (cont’d)
• Control List Counting using start attribute
• Example:
<ol start="50"> Output:
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Nested HTML Lists
• Lists can be nested (list inside list)
• Example:
<ol> Output:
<li>Coffee</li>
<li>Tea
<ol>
<li>Black tea</li>
<li>Green tea</li>
</ol>
</li>
<li>Milk</li>
</ol>
HTML Media
• Multimedia on the web is sound, music, videos, movies, and animations
• Common video formats - MP4, WebM, and Ogg formats are supported by
HTML
HTML Media (cont’d)
• HTML <video> element is used to show a video on a web page
• Example:
HTML Media (cont’d)
• Common audio formats – mp3 is the best format for compressed recorded
music
HTML Media (cont’d)
• HTML <audio> element is used to play an audio file in HTML
HTML Semantic Elements
• A semantic element clearly describes its meaning to both the browser and
the developer
• Example: <header>,<nav>,
<section>,<article>,<aside>,
<footer>,<time>
HTML Semantic Elements (cont’d)
<!DOCTYPE html> <nav>
<html> <ul>
<head> <li><a href="#">Home</a></li>
<title>Semantic Page</title> <li><a href="#">About</a></li>
</head> <li><a href="#">Contact</a></li>
<body> </ul>
</nav>
<h1>HTML Semantics Demo</h1>
<article>This is an article
<header>This is Header</header> element.</article>
<section> </section>
<footer>This is Footer</footer>
</body>
</html>
HTML Semantic Elements (cont’d)
References:
1. [Link]
2. [Link]
3. Step by Step HTML5