Programming in Practical Engineering
Languages
Chapter 2 : HTML Langauge
BURKINA INSTITUTE OF TECHNOLOGY
Electrical Engineering
(E.E)
Academic year : 2024-2025
Semester 3
26 octobre 2024
Course outline
1 HTML history
2 What is HTML
3 HTML page structure
4 HTML Basic elements
5 HTML Advanced elements
6 Applications
(B.i.t/E.E, S3) Engineering Practical Programming 26 octobre 2024 2 / 33
Quote
A programming language is a convention for giving commands to a
computer. It’s not supposed to be obscure, weird and full of
subtle traps...
Dave Small
(B.i.t/E.E, S3) Engineering Practical Programming 26 octobre 2024 3 / 33
1. HTML history
(B.i.t/E.E, S3) Engineering Practical Programming 26 octobre 2024 4 / 33
1. HTML history
(B.i.t/E.E, S3) Engineering Practical Programming 26 octobre 2024 5 / 33
2. What is HTML
(B.i.t/E.E, S3) Engineering Practical Programming 26 octobre 2024 6 / 33
2. What is HTML
2.1. HTML is :
HTML stands for Hyper Text Markup Language
HTML is the standard markup language for creating Web pages
HTML describes the structure of a Web page
HTML consists of a series of elements
HTML elements tell the browser how to display the content
(B.i.t/E.E, S3) Engineering Practical Programming 26 octobre 2024 7 / 33
2. What is HTML
2.2. A simple HTML document
(B.i.t/E.E, S3) Engineering Practical Programming 26 octobre 2024 8 / 33
2. What is HTML
2.3. Result
(B.i.t/E.E, S3) Engineering Practical Programming 26 octobre 2024 9 / 33
2. What is HTML
2.2.1. Explanation
The <!DOCTYPE html> declaration defines that this document is
an HTML5 document
The <html> element is the root element of an HTML page
The <head> element contains meta information about the HTML
page
The <title> element specifies a title for the HTML page
(which is shown in the browser )
The <body> element defines the document’s body, and is a
container for all the visible contents.
The <h1> element defines a large heading
The <p> element defines a paragraph
(B.i.t/E.E, S3) Engineering Practical Programming 26 octobre 2024 10 / 33
2. What is HTML
2.3. What is HTML element
An HTML element is defined by a start tag, some content, and
an end tag:
<tagname> Content goes here... </tagname>
The HTML element is everything from the start tag to the end
tag:
<h1>My First Heading </h1>
<p>My first paragraph.</p>
Some HTML elements have no content (like the <br> element)
(B.i.t/E.E, S3) Engineering Practical Programming 26 octobre 2024 11 / 33
2. What is HTML
2.4. Examples
(B.i.t/E.E, S3) Engineering Practical Programming 26 octobre 2024 12 / 33
3. HTML page structure
(B.i.t/E.E, S3) Engineering Practical Programming 26 octobre 2024 13 / 33
3. HTML page structure
3.1. Note
The content inside the <body> section will be displayed in a
browser.
The content inside the <title> element will be shown in the
browser’s title bar or in the page’s tab.
This is a visualization of an HTML page structure:
(B.i.t/E.E, S3) Engineering Practical Programming 26 octobre 2024 14 / 33
3. HTML page structure
2.2. HTML page structure
(B.i.t/E.E, S3) Engineering Practical Programming 26 octobre 2024 15 / 33
4. HTML Basic elements
(B.i.t/E.E, S3) Engineering Practical Programming 26 octobre 2024 16 / 33
4. HTML Basic elements
4.1. HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading.
<h6> defines the least important heading:
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
(B.i.t/E.E, S3) Engineering Practical Programming 26 octobre 2024 17 / 33
4. HTML Basic elements
4.2. HTML Paragraphs
HTML Paragraphs
HTML paragraphs are defined with the <p> tag:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
(B.i.t/E.E, S3) Engineering Practical Programming 26 octobre 2024 18 / 33
4. HTML Basic elements
4.3. HTML Links
HTML Links
HTML links are defined with the <a> tag
The link’s destination is specified in the href attribute.
Example:
<a href="www.bit.bf">This is a link</a>
(B.i.t/E.E, S3) Engineering Practical Programming 26 octobre 2024 19 / 33
4. HTML Basic elements
4.3. HTML Images
HTML Images
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), width, and
height are provided as attributes:
Example:
<img src="bit.jpg" alt="bit.bf" width="104"
height="142">
(B.i.t/E.E, S3) Engineering Practical Programming 26 octobre 2024 20 / 33
5. HTML Advanced elements
(B.i.t/E.E, S3) Engineering Practical Programming 26 octobre 2024 21 / 33
5. HTML Advanced elements
5.1. HTML Tables
HTML tables allow web developers to arrange data into rows
and columns.
A table in HTML consists of table cells inside rows and
columns.
Each table row starts with a <tr> and ends with a <tr> tag.
Each table cell is defined by a <td> and a </td> tag.
Everything between <td> and <td> are the content of the table
cell.
(B.i.t/E.E, S3) Engineering Practical Programming 26 octobre 2024 22 / 33
5. HTML Advanced elements
5.1.2. HTML Table Tags
(B.i.t/E.E, S3) Engineering Practical Programming 26 octobre 2024 23 / 33
5. HTML Advanced elements
5.1.3. HTML Table: Examples
(B.i.t/E.E, S3) Engineering Practical Programming 26 octobre 2024 24 / 33
5. HTML Advanced elements
5.1.4. HTML Table: code
(B.i.t/E.E, S3) Engineering Practical Programming 26 octobre 2024 25 / 33
5. HTML Advanced elements
5.2. HTML forms
An HTML form is used to collect user input.
The user input is most often sent to a server for processing.
Example:
(B.i.t/E.E, S3) Engineering Practical Programming 26 octobre 2024 26 / 33
5. HTML Advanced elements
5.2. HTML forms elements
The HTML <form> element is used to create an HTML form for
user input.
The <form> element is a container for different types of
input elements, such as: text fields, checkboxes, radio
buttons, submit buttons, etc.
Example:
(B.i.t/E.E, S3) Engineering Practical Programming 26 octobre 2024 27 / 33
5. HTML Advanced elements
5.2.1. HTML forms elements input
The <input> Element
The HTML <input> element is the most used form element.
An <input> element can be displayed in many ways.
(B.i.t/E.E, S3) Engineering Practical Programming 26 octobre 2024 28 / 33
5. HTML Advanced elements
5.2.2. HTML forms elements input
Text Fields
The <input type="text"> defines a single-line input field for
text input.
(B.i.t/E.E, S3) Engineering Practical Programming 26 octobre 2024 29 / 33
5. HTML Advanced elements
5.2.3. HTML forms elements input
The <input type="radio"> defines a radio button.
Radio buttons let a user select ONE of a limited number of
choices.
(B.i.t/E.E, S3) Engineering Practical Programming 26 octobre 2024 30 / 33
5. HTML Advanced elements
5.2.4. HTML forms elements input
The Submit Button
The <input type="submit"> defines a button for submitting the
form data to a form-handler.
The form-handler is typically a file on the server with a
script for processing input data.
The form-handler is specified in the form’s action attribute.
(B.i.t/E.E, S3) Engineering Practical Programming 26 octobre 2024 31 / 33
6. Applications
(B.i.t/E.E, S3) Engineering Practical Programming 26 octobre 2024 32 / 33
==END==
(B.i.t/E.E, S3) Engineering Practical Programming 26 octobre 2024 33 / 33
