HTML

Fundamentals
CS200: Web Development
Tunis Business School - 2023/2024
HTML Basic elements

Title Body Headings Paragraphs

Links Lines Images Lists

Tables iFrames Forms …

HTML Headings

<hX>, </hX>
• X = 1, 2, 3, 4, 5, or 6
• Text between these tags will be
rendered as an X-level section header.
Paragraphs

<p>, </p>
• Text between these tags will be
rendered as a paragraph by the
browser, with space above and below.
Lines

<hr> <br>
• Creates a horizontal • Used to add a line
line in an HTML page. break (a new line)
• Used to separate without starting a
content new paragraph.
Text Formatting
Tag Description
<b> Defines bold text
<strong> Defines strong text
<i> Defines italic text
<em> Defines emphasized text
<small> Defines small text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
<mark> Defines marked/highlighted text
Images

<img src=X ... />

• Another self-closing tag for displaying an
image located at X, with possible
additional attributes (such as specifying
width and height).
Links

<a href=X>, </a>

• Creates a hyperlink to web page X, with
the text between the tags rendered
and functional as the link text.
Lists

<ul>, </ul> <ol>, </ol> <li>, </li>

• Demarcate • Demarcate • Demarcate list
the beginning the beginning items with an
and end of an and end of an ordered or
unordered ordered unordered list.
(bulleted) list. (numbered)
list.
Table
• Demarcate the beginning and end of a table
<table>, </table> definition.

• Demarcate the beginning and end of a row within a

<tr>, </tr> table.

• Demarcate the beginning and end of a column

<td>, </td> within a row within a table.

• Demarcate the beginning and end of table header

<th>, </th> (bold and centered)
Forms

<form action="/submit" method="post">

<!-- Form elements go here -->
</form>
• An HTML form is used to collect user input. The
user input is most often sent to a server for
processing.
Form Attributes

action • specifies the URL to which the form data will be sent when the
user submits the form.
• It typically points to a server-side script or a URL that handles

attribute form submissions

method
• Determines how the form data is sent to the server.
• GET: Appends form data to the URL as query parameters.
Suitable for simple data retrieval.

attribute • POST: Sends form data in the request body. Suitable for sensitive
or large amounts of data
Text Input Fields
<input type="text"> • Allows users to enter single-line text.

<input type="password"> • Conceals text input for sensitive information like passwords.

<input type="email"> • Ensures the input conforms to an email address format.

<input type="tel"> • For entering telephone numbers.

<input type="number"> • Accepts numeric input.

<input type="date">, <input type="time">, • For date and time input.

<input type="datetime-local">
Textarea

• Provides a multiline
text input field where
<textarea> users can enter longer
text or comments.
Selection Fields

<select> • Creates a dropdown selection list.

• Defines individual options within a

<option> <select> dropdown.

• Groups related options within a

<optgroup> dropdown.
Checkboxes and Radio Buttons:

<input • Allows users to select multiple

type="checkbox"> options from a list.

• Users can select only one option

<input from a group of radio buttons by
type="radio"> specifying the same name attribute.
File Input

• Enables users to
<input upload files (e.g.,
type="file">
images, documents).
Buttons

<input • Submits the form data to the server.

type="submit">
<input • Resets the form fields to their initial
type="reset"> values.

• Creates a custom button that can

<button> trigger JavaScript functions.
HTML Semantic Elements
• Defines a header for the document or a
<header> section

<article> • Defines an article in the document

• Defines navigation links in the web

<nav> page

<section> • Defines a section in the document

• Defines content aside from the page

<aside> (sidebar)

• Defines a footer for the document or a

<footer> section
HTML Tags

<!--, --> <!DOCTYPE html>

• Demarcate the • Specific to HTML5,
beginning and end lets the browser
of an HTML know that’s the
comment. standard you’re
using.
References

HTML CheatSh HTML W3 Sch HTML Element

eet ools s Reference

HTML Color N HTML MDN HTML Web.de

ames v
Activity 1: Build your first Web page

Web page for the CS200 Introduction lecture

Check CS200.html for the final output

Follow the instructions in the « Activity 1 » section to

build the web page