WEB PROGRAMMING

HTML (Part 1)

Introduction

  • Instructor: Assoc. Prof. Mohammad Faidzul Nasrudin

  • Subject: HTML5

  • Learning Method: "Learn by Doing"

HyperText Markup Language

Definition

  • HTML stands for HyperText Markup Language.

    • It is a language used to create web pages.

  • Markup refers to data included in an electronic document.

  • A markup language defines rules for data inclusion in documents and how it is combined with content for human and computer use.

    • HTML is plain text with various tags defining document structure.

    • It allows for headings, paragraphs, images, links, lists, tables, and multimedia features.

Characteristics

  • Simplicity: HTML is easy to learn; every tag is predefined.

  • Web Browsers: Examples include Chrome, Internet Explorer, Firefox, and Safari, which read HTML and display web pages.

  • Text Editors: HTML can be written in simple editors like Notepad or advanced IDEs like Adobe Dreamweaver, Sublime, NetBeans, and VSCode.

  • File Extensions: HTML files use .html or .htm extensions.

    • HTML code can be saved as filename.html or filename.htm.

History of HTML

  • Tim Berners-Lee, a physicist at CERN, invented HTML in 1991.

  • Originally developed for automated information-sharing among scientists.

  • Evolution: HTML has evolved through various versions and updates.

    • The first version had 18 HTML tags; now about 142 tags exist.

  • The World Wide Web Consortium (W3C) is responsible for creating and maintaining web standards.

Historical Milestones

  • 1992: HTML 2.0 – Standardized core features per 1994 practices.

  • 1997: HTML 3.2 – Introduced tables, applets, text-flow, maintains compatibility with HTML 2.0.

  • 1999: HTML 4.01 – Added multimedia support, scripting, style sheets, and accessibility features.

  • 2000: XHTML 1.0 – Reformed HTML 4.01 in XML.

  • 2014: HTML 5 – Introduced offline storage, rich content elements, and audio/video support, integrating newer features.

  • 2017: HTML 5.2 – Improvements including security policy and payment request API.

Tags and Attributes

HTML Elements

  • All HTML pages consist of elements made up of a combination of tags and attributes.

  • Tag: Indicate where an element begins and ends, e.g., <a> for links.

  • Attribute: Describe characteristics of elements while the element is used. Elements contain:

    • Start tag: Marks the beginning, e.g., <a>.

    • Content: What users see.

    • End tag: Similar to start tag but with a /, e.g., </a> to close a link.

Void Elements

  • Certain elements do not require end tags:

    1. <img src="logo.jpg">

    • Names are case-insensitive, but lowercase usage is standard.

    • Attribute values can be enclosed in single or double quotes.

Must Have Elements

Essential HTML Tags

  1. <!DOCTYPE html>: Informs the browser about the HTML version.

    • HTML5: <!DOCTYPE html>.

    • HTML 4.01: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

  2. <html>: Root tag defining the entire document.

  3. <head>: Contains meta-information like page title and charset; can include CSS/JS.

  4. <body>: Encloses all visible content on the page.

Example Structure
<!DOCTYPE html>
<html>
<head>
<!-- META INFO -->
</head>
<body>
<!-- PAGE CONTENT -->
</body>
</html>

Hello World! Example

  • This example displays the message Hello World!.

  • Note: HTML ignores whitespace.

  • To manage spaces or line breaks:

    • Use <br> tag for line breaks.

    • Insert comments to improve markup readability (ignored by the browser).

    • Comments format: <!-- comment -->.

Title Element

  • <title> element describes the webpage.

Functions of Title Element

  1. Displays title in browser tab and title bar.

  2. Used by search engines for indexing.

Paragraph and Headings

  • Text between <p> tags forms a paragraph.

  • HTML5 has six heading tags (h1-h6) denoting importance from h1 (largest) to h6 (smallest).

  • Block-level elements: Take up full width and start new lines.

  • Inline elements: Format content within block levels without breaking the flow.

Hyperlinks

  • Hyperlinks reference other resources and are rendered with default underlining and blue color.

  • Created using the <a> (anchor) tag with the attribute href, pointing to resources like web pages, files, or emails.

Example Hyperlink
<a href="http://www.example.com">Example Link</a>

Internal Links

  • Use <a> tag for linking to another section of the document by referencing the element's ID.

Example

  1. Set the ID for a heading:

<h1 id="top">Page Title</h1>

  1. Create a link:

<a href="#top">Go to Top</a>

Images

Supported Formats

  • JPEG, GIF, PNG, etc.

Inserting Images

  • Use <img> tag:

    • src attribute specifies image location.

    • width and height attributes are optional but improve load time.

Example
<img src="picture.jpg" width="300" height="400">

Images as Hyperlinks

Wrap an image in an anchor tag for clickable images.
Accessibility

  • Use the alt attribute for text displayed when the image can't load, aiding visually impaired users.

Example
<a href="http://www.example.com">
  <img src="logo.jpg" alt="Example Logo">
</a>

File Paths

Absolute vs Relative Paths

  • Absolute Path: Full URL of the resource, starting with http://

  • Relative Path: Points to a file relative to the current document location, best practice for website portability.

Example

  1. Same folder: <img src="picture.jpg">

  2. Images folder: <img src="images/picture.jpg">

  3. Parent folder: <img src="../picture.jpg">

Special Characters in HTML

  • HTML5 supports character entities, such as & for &, < for <, and > for >.

Examples

  • Decimal: &#37; for %.

  • Hexadecimal: &#x25;

Horizontal Rules

  • Use the <hr> tag to create horizontal lines, but CSS is recommended for better designs.

  • <hr> is considered a legacy element.

Lists

Types

  • Unordered lists: Created with <ul> where items are created with <li>.

  • Ordered lists: Created with <ol> using <li> as well.

Nesting

  • Lists can be nested to represent hierarchies:

<ul>
  <li>Item 1
    <ul>
      <li>Subitem 1</li>
    </ul>
  </li>
</ul>

Tables

Defining Tables

  • Use <table>, which consists of:

    • Head: <thead> for headers.

    • Body: <tbody> for main content.

    • Foot: <tfoot> for summary information.

Example
<table>
  <thead>
    <tr><th>Header</th></tr>
  </thead>
  <tbody>
    <tr><td>Data</td></tr>
  </tbody>
</table>

Merging Table Cells

Attributes

  • Use rowspan and colspan attributes to merge cells:

<td colspan="2">Merged Cell</td>

Div vs Span

  • <div>: Block level, used for layout, tracing larger sections.

  • <span>: Inline element, used for styling portions without disrupting surrounding content.

Inline Formatting Tags

  • Many inline tags exist for text formatting: <strong>, <em>, etc., enhancing textual implementation without comprehensive flow disruption.

Meta Elements

  • Definition: Metadata is not displayed on the page but is machine parsable.

  • Used by search engines and to specify characteristics like page description or keywords.

Example Meta Tags
<meta name="description" content="This is a site about...">

HTML (Part 2): Forms

Forms

  • HTML5 provides forms for collecting users’ information.

Creating Forms

  • Use the <form> tag to initiate a form with input elements like text fields, checkboxes, etc.

Form Action Attribute

  • Action attribute specifies where to send form data.

    • Usually points to server-side scripts, e.g., PHP.

    • Example: <form action="login_process.php">.

Form Method Attribute

  • Defines how data is sent to the server: GET or POST.

Example
<form action="login_process.php" method="post">
</form>

URL Encode

  • Converts characters into valid ASCII format; replaces spaces with %20 or +.

Form Submit

  • Submit button sends data to the specified action when clicked.

Example
<input type="submit" value="Login">

Text Input

  • Allows users to input data, with attributes for size and max characters.

Example
<input type="text" name="user" id="uid" placeholder="Insert Username">

Form Input Types

  • Various input types available, from text to email, to file uploads.

    • Not all types are supported across all browsers.

Example Input Types

  • Button, Checkbox, Email, File, Hidden, Image, Password, Radio, Search, Text, Tel, Url.

Form Handling

PHP Superglobals

  • $_GET and $_POST collect data from forms by capturing data sent either through URL parameters or within the HTTP POST body.

MySQL/MariaDB

MySQL

  • An open