Introduction to Web Designing and HTML
This document provides an introduction to web designing, differentiating it from desktop
application development. It covers the fundamentals of HTML, including its structure,
elements, attributes, and common tags for headings, paragraphs, images, tables, lists, and
forms. The document also includes a teaching synopsis for a 9-class unit with 6
accompanying labs, along with suggested web resources and student activities.
Web Designing vs. Desktop Applications
Web designing involves creating websites and web applications that are accessed through a
web browser. These applications run on a server and are accessed by users over the internet
or an intranet. Desktop applications, on the other hand, are installed and run directly on a
user's computer operating system.
Here's a table summarizing the key differences:
| Feature | Web Application | Desktop Application
|
|-------------------|---------------------------------------------------|-----------------------------------------------
-----|
| Execution | Runs on a server, accessed via a web browser | Runs directly on the user's
operating system |
| Deployment | Deployed on a web server, accessible remotely | Installed on each user's
computer |
| Accessibility | Accessible from any device with a browser | Limited to the device it's
installed on |
| Updates | Updates are deployed on the server, instant access | Requires users to
download and install updates |
| Technology | HTML, CSS, JavaScript, Server-side languages | Programming languages
like C++, Java, C# |
| Security | Relies on server-side security measures | Relies on operating system and
application security |
| Offline Access| Limited or requires specific technologies | Generally available
|
Introduction to HTML
HTML (HyperText Markup Language) is the standard markup language for creating web
pages. It provides the structure and content of a webpage, while CSS (Cascading Style
Sheets) handles the presentation and styling.
HTML Structure
An HTML document has a basic structure:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
• <!DOCTYPE html>: Declares the document type as HTML5.
• <html>: The root element of an HTML page.
• <head>: Contains meta-information about the HTML document, such as the title,
character set, and links to CSS stylesheets.
• <title>: Specifies a title for the HTML page (which is shown in the browser's title bar or
tab).
• <body>: Contains the visible page content.
HTML Elements
HTML elements are the building blocks of HTML pages. They are defined by a start tag, some
content, and an end tag.
• Start tag: <p>
• Content: This is a paragraph.
• End tag: </p>
Some elements have no content and are called empty elements. For example, <br> (line
break) and <img> (image). Empty elements usually have a self-closing tag: <br />.
HTML Attributes
Attributes provide additional information about HTML elements. They are always specified in
the start tag.
• href: Specifies the URL of the page the link goes to. (Used in <a> tag)
• src: Specifies the path to the image. (Used in <img> tag)
• alt: Specifies an alternate text for an image, if the image cannot be displayed. (Used in
<img> tag)
• style: Specifies an inline CSS style for an element.
• title: Specifies extra information about an element (displayed as a tooltip).
Example:
<a href="https://www.example.com" title="Go to Example">Visit Example</a>
<img src="image.jpg" alt="Example Image">
Common HTML Tags
• Headings: <h1> to <h6> define headings of different sizes. <h1> is the most important
heading.
• Paragraphs: <p> defines a paragraph.
• Images: <img> embeds an image.
• Tables: <table>, <tr> (table row), <td> (table data cell), <th> (table header cell) are used
to create tables.
• Lists: <ul> (unordered list), <ol> (ordered list), <li> (list item) are used to create lists.
• Divs and Spans: <div> (block-level element) and <span> (inline element) are used to
group elements for styling or scripting purposes.
Blocks and Symbols
• Block-level elements: Take up the full width available and always start on a new line
(e.g., <p>, <h1>, <div>).
• Inline elements: Only take up as much width as necessary and do not start on a new
line (e.g., <span>, <a>, <img>).
HTML provides special characters or symbols that cannot be directly typed on a keyboard.
These are represented using entity names or entity numbers. For example:
• < represents < (less than)
• > represents > (greater than)
• & represents & (ampersand)
• represents a non-breaking space
Embedding Multi-Media Components
HTML allows embedding multimedia content like audio and video.
• <audio>: Embeds audio files.
• <video>: Embeds video files.
• <embed>: Embeds external applications or interactive content.
• <object>: Embeds multimedia (like audio, video, Java applets, ActiveX, PDF, and Flash)
Example:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
HTML Forms
HTML forms are used to collect user input.
• <form>: Defines an HTML form for user input.
• <input>: Specifies different types of input fields (text, password, submit, radio,
checkbox, etc.).
• <textarea>: Defines a multi-line text input control.
• <select>: Defines a drop-down list.
• <button>: Defines a clickable button.
• <label>: Defines a label for an <input> element.
Example:
<form action="/submit" method="post">
<label for="name">Name:</label><br>
<input type="text" id="name" name="name"><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Submit">
</form>
Teaching Synopsis (9 Classes, 6 Labs)
Unit Goal: Students will understand the fundamentals of web design using HTML and be able
to create basic web pages with text, images, lists, tables, and forms.
Class Breakdown:
• Class 1: Introduction to Web Design, Web vs. Desktop Applications, What is HTML?
• Class 2: HTML Structure, Basic Tags (<html>, <head>, <title>, <body>)
• Class 3: Headings (<h1> - <h6>), Paragraphs (<p>), Line Breaks (<br>)
• Class 4: Images (<img>), Attributes (src, alt, width, height)
• Class 5: Lists (<ul>, <ol>, <li>)
• Class 6: Tables (<table>, <tr>, <td>, <th>)
• Class 7: Divs and Spans (<div>, <span>), Block vs. Inline Elements
• Class 8: HTML Forms (<form>, <input>, <textarea>, <select>, <button>)
• Class 9: Embedding Multimedia (<audio>, <video>), Review and Q&A
Lab Breakdown:
• Lab 1: Setting up a development environment (text editor, browser). Creating a basic
HTML page with headings and paragraphs.
• Lab 2: Adding images to the HTML page, experimenting with attributes.
• Lab 3: Creating unordered and ordered lists.
• Lab 4: Building a simple HTML table.
• Lab 5: Using divs and spans to structure content.
• Lab 6: Creating a basic HTML form with different input types.
Web Resources
• Mozilla Developer Network (MDN): [https://developer
