Introduction to Web
Technology
Course Code: CSC 3222 Course Title: WEB TECHNOLOGIES
Dept. of Computer Science
Faculty of Science and Technology
Lab No: 1 Week No: 1 Semester: Summer 19-20
Lecturer: S M Abdullah Shafi <shafi@aiub.edu>
Lecture Outline
1. Learning Objectives
2. HTML Tags and Elements
3. HTML Attributes
4. HTML Forms
I. HTML Forms Example
II. HTML Form Elements
III. HTML Input Types
5. Books and References
Learning Objectives
• In this Lab, we will learn about HTML document,
HTML Tags, Elements and Attributes.
• To write html, we need a text editor; e.g. sublime
text or Vscode or any editor and web browser.
• Design and develop HTML document; e.g. html
page, html form, etc.
HTML Tags and Elements
• An HTML element usually consists of a start tag and
an end tag, with the content inserted in between.
Start tag Element content End tag
<h1> My First Heading </h1>
<p> My first paragraph. </p>
<br>
HTML Attributes
• All HTML elements can have attributes
• Attributes provide additional information about an element
• Attributes are always specified in the start tag
• Attributes usually come in name/value pairs like: name="value“
• Example : HTML links are defined with the <a> tag. The link address is specified
in the href attribute.
<a href="https://www.aiub.edu">AIUB</a>
<img src="img_girl.jpg">
• Please explore all Elements/ Tags/ attributes from https://www.w3schools.com/
one by one.
HTML Forms
• The HTML <form> element defines a form that is used to collect user input.
<form>
form elements
</form>
• Form elements are different types of input elements, like: text fields,
checkboxes, radio buttons, submit buttons, and more.
Type Description
<input type="text"> Defines a single-line text input field
<input type="radio"> Defines a radio button (for selecting one of
many choices)
<input type="submit"> Defines a submit button (for submitting the
form)
HTML Forms Example
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
HTML Form Elements
• The <input> Element
<input type="text" id="firstname" name="firstname">
• The <textarea> Element
• <textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
• See more input type
https://www.w3schools.com/html/html_form_input_types.asp
HTML Input Types
• Here are the different input types you can use in HTML:
<input type="button">
<input type="checkbox">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
• See more input type
https://www.w3schools.com/html/html_form_input_types.asp
Your Task
• Write necessary HTML script to achieve the below-
given layout of a “Registration Page”.
• Design a static personal web site including all your
information.
Books
• W3Schools Online Web Tutorials; URL: http://www.w3schools.com
• PHP Documentation; URL: http://www.php.net/docs.php
• Sams Teach Yourself Ajax JavaScript and PHP All in One; Phil Ballard and
Michael Moncur; Sams Publishing; 2010
• JavaScript Phrasebook; Christian Wenz; Sams Publishing; 2007
• PHP and MySQL Web Development, 4/E; Luke Welling and Laura
Thomson; Addison-Wesley Professional; 2009
• JavaScript for Programmers Paul J. Deitel and Harvey M. Deitel; Prentice
Hall; 2009
• Beginning PHP5, Apache, and MySQL Web Development; Elizabeth
Naramore, Jason Gerner, Yann Le Scouarnec, Jeremy Stolz and Michael
K. Glass; Wiley Publishing; 2005
• XML in a Nutshell, 3/E; Elliotte Rusty Harold and W. Scott Means;
O'Reilly Media; 2004
References
1. https://www.ntu.edu.sg/home/ehchua/programming/webprogramming/HTT
P_Basics.html
2. https://developer.mozilla.org/enUS/docs/Web/HTTP/Status
3. https://www.w3schools.com/html/html_intro.asp
4. https://www.w3schools.com/html/html_xhtml.asp
