Scribd
Upload
19 views33 pages

Chap 2 HTML Language

Uploaded by

Zidama A SOULAMA
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
19 views33 pages

Chap 2 HTML Language

Uploaded by

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

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

You might also like