Scribd
Upload
6 views

Chap 2 HTML Language

Uploaded by

Zidama A SOULAMA
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

Chap 2 HTML Language

Uploaded by

Zidama A SOULAMA
Copyright
© © All Rights Reserved
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