Scribd
Upload
34 views22 pages

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

HTML is used to define the structure and layout of web pages. It contains various elements to define headings, paragraphs, lists, links, images, and more. Common elements include <h1> for main headings, <p> for paragraphs, <ul>/<ol> for unordered/ordered lists, <a> for links, and <img> to embed images. HTML forms allow collecting user input using elements like <input> for text fields, <textarea> for comments, and <select> for dropdowns. Semantic elements such as <header>, <nav>, <article>, and <footer> define common sections of a page.

Uploaded by

sinenskander
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
34 views22 pages

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

HTML is used to define the structure and layout of web pages. It contains various elements to define headings, paragraphs, lists, links, images, and more. Common elements include <h1> for main headings, <p> for paragraphs, <ul>/<ol> for unordered/ordered lists, <a> for links, and <img> to embed images. HTML forms allow collecting user input using elements like <input> for text fields, <textarea> for comments, and <select> for dropdowns. Semantic elements such as <header>, <nav>, <article>, and <footer> define common sections of a page.

Uploaded by

sinenskander
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 22

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

You might also like