Introduction toWeb

Development & HTML (CS220)

TBS/2019-2020
 Internet VS Web
2

 The largest network in the  Invented 20 years later after

world. the Internet.
 An infrastructure linking
computers together.  Refers to the World Wide Web
(WWW).
 A way of transporting content.
 One of the ways that
 Is based on the TCP/IP information can be
(Transmission Control disseminated and accessed over
Protocol/Internet Protocol) the Internet.
protocols.
 Internet VS Web
3

 Used for different services  Is one of the most widespread

relying on different protocols. services using Internet.
Service Protocol  Utilizes browsers to access Web
Email Imap, Smtp, Pop3 documents called Web pages
Instant messaging Telnet
File transfer Ftp
Discussion groups Nntp
(mailing lists, Linked to each Contain graphics,
other via sounds, text and
newsgroups, etc).
hyperlinks video.
Web Http, Https
 Web Site
4
 A set of interconnected web pages
 Usually includes a homepage
o The main page of the website
o All the pages of the Web site are organized around it and link back to it
 Posted on a web address called URL.

o Uniform Resource Locator : A string used to address the web

resources: HTML document, image, sound, mailbox, etc.
o Example: http://www.utunis.rnu.tn/tbs

 Published/stored on at least one web server.

o Powerful computer, remaining all the time on.
o Contains the pages of the website and delivers
them to users at any time.
 How the Web Works?
5
 Uses classical client / server architecture:

o Establishes a TCP connection between the server (using port 80

generally) and the client (web browser).
o Utilizes the HTTP protocol (HyperText Transfer Protocol): a text-
based request-response protocol.
 The HTTP protocol (1/3)
6

• Common HTTP requests sent from the client to the server:

 GET:
 Requests a web resource from the server (e.g. searching for a
keyword in Google, searching a video on YouTube, etc).
 POST:
 Used to post/send data up to the web server (e.g. you want to
pass some secret, sensitive data to the server end via forms).
 Results in the creation of a new resource or the update of an
existing resource or both.
 HEAD:
 Similar to a GET request but the response contains only the
headers
 Returns information about objects
 The HTTP protocol (2/3)
7
 Request format

 Response format
 The HTTP protocol (3/3)
8

 The HTTP server interprets the request message, and returns

an appropriate response message:

o the requested resource OR o an error message

 Each response has a specific status code:

Example Status code Meaning

200 successful request.
404 content not found
401 user not authenticated
500 internal server error
302 redirection
 HTML
9

HYPERTEXT MARKUP LANGUAGE

 HTML
10
 HTML (Hyper Text Markup Language):
 Defines the structure of webpages
 Determines how data is displayed online
 Is NOT a programming language
 Is a MARKUP language:
 It encapsulates, or “marks up” data within HTML tags
 The browser interprets and displays the text contained in the
document based on these tags.
 Tag:
 Defines the data
 Describes its purpose on the webpage.
 Example: italic
Html code <B> A Review of the Book<I>Wind Instruments Century</I></B>

bold
Result A Review of the Book Wind Instruments Century
 HTML versions
11
 HTML 1: 1991  HTML 4: 1998
 Proposes
 Version 1
 the use of frames, of
 Created by Tim Berners- complex tables,
 Improvements on the
Lee in.
forms, etc.
 HTML 2: 1994  First use of style sheets,
 Laid the basis of the CSS.
following versions of  HTML 5: 2014
HTML.  Current version.
 HTML 3: 1 9 9 6  More improvements such as
 the ability to easily include
 Added new structures videos,
such as tables, applets,  a better layout of content,
scripts, text positioning  new features for forms, etc.

around images, etc.

 Creating HTML Pages
12

• AnHTML file must have .htm or .html file extension (e.g.,

index.html).
o .htm and .html are equivalents.

• To begin coding in HTML, we need:

o a text editor,
o a browser
o and a server.

• To view the source code of any webpage :

1. Right-click in the page

2. Select "View Source" (IE) or "View Page Source" (Firefox),
or similar for other browsers.

Opens a window containing the HTML code of the page.

 Creating HTML Pages
13

 HTML files can be created with

o Text editors: Notepad++, gEdit, vim, Emacs, jEdit, etc.
 Flexible and more customizable
 Need to learn the language

o HTML editors (WYSIWYG: What You See Is What You

Get): Microsoft FrontPage, Macromedia Dreamweaver,
Netscape Composer, Microsoft Word, Visual Studio, etc.
 No need to learn the language.

 Poor/limited quality of the HTML

 CSS code automatically generated by these tools.

 Reading HTML pages (Browsers)
14

 Computer browsers
 Google Chrome, Mozilla Firefox, Internet Explorer (up
to windows 10), Edge, Safari, Opera, etc.

 Mobile browsers
 Lighter versions of computer browsers to suit the mobile
limitations

 Each browser displays a webpage slightly different

from the other browsers.
 HTML Tutorial(1/3)
15

To create your first web page.

 Step 1:

 In C:/Xampp/htdocs, create a directory named in this format

YourFirstNameLastSurnameGroupSite.
 In the created directory, create four new directories named
Connections, Files, Images and Modules

 Step 2: Start Notepad++.

 HTML Tutorial(2/3)
16
 Step3:
 Create a new page (press Ctrl + N).
 Save this page as a html page (Select Save as in Notepad++'s file menu)
under modules directory of the created directory (C:/Xampp/htdocs/
YourFirstNameLastSurnameGroupSite/modules).
 Reproduce the following code in your notepad++ page.
<html>
<head>
<title> This is document title </title>
</head>

<body>
<h1> This is heading. </h1>
<p> Document description goes here. </p>
</body>
</html>
 HTML Tutorial(3/3)
17
 Step4:
 Open Xampp Control panel
 Start Apache (you must have a green background).

 Step 5:
 Open your browser (chrome for example)
 Type this url :
localhost/YourFirstNameLastSurnameGroupSite.
HTML tags
18
 HTML Tags definition
19

 HTML markup tags are usually called HTML tags.

 HTML tags are keywords (tag names) surrounded by angle brackets
e.g. <html>.

<tagname> content</tagname>

 HTML tags normally come in pairs like <b> and </b>.

 The first tag in a pair is the start tag or opening tag.
 The second tag is the end tag or closing tag.
 The end tag is written like the start tag, with a forward slash before
the tag name </tagname>.
 HTML tags are NOT case sensitive: <P> means the same as <p>.
 HTML Page Structure (1/3)
20

 DOCTYPE:
o MUST be the very first line of your file, before <html>.
o NOT an HTML tag; it is an instruction to your web browser.
o Tells the browser what version of HTML to expect (version 5 here).
 HTML Page Structure (2/3)
21

 Each HTML element comprises of three parts

 an opening tag,
 a closing tag, and
 text between the two tags

 Empty elements
 HTML elements with no content
 do not have an end tag
 Example: <br> element (for a line break).

 All HTML documents consist of nested HTML elements:

elements contain other elements.
 HTML Basic elements
22

 HTML documents are defined by HTML elements. An HTML element is

everything from the start tag to the end tag:

o Title,
o Body,
o Headings,
o Paragraphs,
o Links,
o Lines,
o Images,
o Lists,
o Tables,
o Frames,
o Forms,
o …
 HTML Title
23

 Adds a title to the web page.

<title> content</title>

 Example

<html>
<head>
<title> This is my first web page </title>
</head>

<body>
</body>
</html>
 HTML body
24

 Defines the body of the HTML document.

 Example

<html>
<head>
<title> This is my first web page </title>
</head>

<body>
<p> Page Content</p>
</body>

</html>
 HTML Headings
25

 Six levels of headings using <h1> to <h6> tags.

 <h1> defines the most important (biggest) heading.
 <h6> defines the least important (smallest) heading.

 Example
<html>
<head>
<title> This is my first web page </title>
</head>
<body>
<h1> This is first level heading </h1>
<h2> This is second level heading </h2>
<h3> This is third level heading </h3>
</body>
</html>
 HTML paragraphs
26

 HTML paragraphs are defined with the <p> tag.

 Example

<html>
<head>
<title> This is my first web page </title>
</head>

<body>
<p> paragraph1</p>
<p> paragraph2</p>
</body>

</html>
 HTML Text formatting (1/2)
27
 Formatting tags: HTML tags like <b> (bold ) and <i> (italic ) to
format output 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
 HTML Text formatting (2/2)
28
 Example

<html>
<head>
<title> This is my first web page </title>
</head>

<body>
<p> The following word uses a <b> bold </b> typeface. </p>
<p> The following word uses a <i> italicized </i> typeface. </p>
<p> The following word uses a ^superscript typeface. </p>
<p> The following word uses a _subscript typeface. </p>
<p> The following word uses a <small> small </small> typeface. </p>
</body>

</html>
 HTML PRE Text formatting
29

 Text is always formatted automatically

 Use the pre format <pre>… </pre> tags to force a different format.
 The text inside a <pre> element is displayed in a fixed-width font
(usually Courier), and it preserves both spaces and line breaks.
 Very useful when you want to display examples of code (use the <code>
tag for computer code).
 Example
<pre>
<code>
var x = 5;
var y = 6;
var z = x + y;
</code>
</pre>
 HTML Links
30
 A hyperlink (or link) is a word, group of words, or image that you can click on to
jump to a new document or a new section within the current document.

 When you move the cursor over the link, the arrow will turn into a little hand.

 Links are specified in HTML using the <a> tag.

 <a> can be used to create a link to another document, by using the href attribute.

 The "Link text" doesn't have to be text. It can be an image or any other HTML
element.

<body>
<a href="http://www.utunis.rnu.tn/tbs/">Tunis Business School</a>
</body>

 Clicking on this hyperlink will send the user to TBS' homepage.

 HTML Lines
31

 The <hr>tag
 Creates a horizontal line in an HTML page.
 Used to separate content.
<body>
<p> This is a paragraph </p>
<hr> </hr>
<p> This is another paragraph </p>
<hr> </hr>
<p> This is a third paragraph </p>
</body>

 The <br> tag

 Used to add a line break (a new line) without starting a
new paragraph.
 Is an empty HTML element (no closing tag)
 HTML Images
32

 To display an image on a page, you need to use the <img> tag

<img src=“dog.jpg” width=“120” height=“100”>

 The src refers to the image source : the file dog.jpg

 The width and height attributes specify the dimensions of the
image on the web page in pixels.

 You can also add a brief description of the image using the ‘alt’
attribute.
 It tells the reader what is missing on the webpage if the
browser can't load images.
 The browser will then display the alternate text instead of the
image.
<img src=“dog.jpg” width=“120” height=“100” alt=My pet dog”>
 HTML Images Map
33

 Use the <map> tag to define an image-map: an image with clickable areas.

 The name attribute of the <map> tag is associated with the <img>'s usemap
attribute and creates a relationship between the image and the map.

 The <map> tag contains a number of <area> tags, which define the
clickable areas in the image-map:
 HTML Lists
34

Unordered Lists Ordered Lists Description Lists

<ul> <ol> <dl>

<li> Gold <li> Gold <dt> Gold
<li> Silver <li> Silver <dd> For the best
<li> Bronze <li> Bronze <dt> Silver
</ul> </ol> <dd> …second best
</dl>
 HTML Table Elements (1/2)
35

 Tables are defined with the <table> tag.

 A table is divided into rows (with the <tr> tag)

 Each row is divided into data cells (with the <td> tag).

o A <td> tag can contain text, links, images, lists, forms, other

tables, etc.
 Header information in a table is defined with the <th> tag.

o All major browsers display the text in the <th> element as

bold and centered.

 HTML Table Elements (2/2)
36

 Example

<body>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</table>
</body>
 HTML iFrames (1/2)
37

 The <iframe> tag defines a rectangular region within the document in which
the browser can display a separate document, including scrollbars and
borders.

 It can appear anywhere in your document

 Some practical examples where to use iFrames

 Youtube Video
 HTML iFrames (2/2)
38

 Show a google map as an iframe:

 Enter your address in the search box at Google Maps.

 Click the Link icon (share) in the panel to the left of the map.

 The options to link to, or embed, the map are displayed.

 Select the HTML option (the second one).

 Copy the HTML code and paste it in your web page

 HTML Video Element
39

 The controls attribute adds video controls, like play, pause, and volume.

 To start a video automatically use the autoplay attribute

 There are 3 supported video formats: MP4, WebM, and Ogg. (only MP4
is supported by all the browsers)
 HTML Audio Element
40

 There are 3 supported audio formats: MP3, Wav, and Ogg.

 HTML Forms
41

 Forms are the most popular way to make web pages interactive. A form on a
web page allows the user to enter requested information and submit it for
processing.

 An HTML form can contain input elements like text fields, checkboxes, radio-
buttons, submit buttons and more. A form can also contain select lists,
textarea, fieldset, legend, and label elements.

 Most frequently used form attributes are:

 Name: This is the name of the form.

 Action: Here you will specify any script URL which will receive uploaded data.
 Method: Here you will specify method to be used to upload data. It can take various
values but most frequently used are GET and POST.
 HTML Forms: Text Fields (1/2)
42

 <input type="text"> defines a one-line input field that a user can enter text
into:
<body>
<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
</body>

 <input type="checkbox"> defines a checkbox. Checkboxes let a user select

ZERO or MORE options of a limited number of choices.

 <input type="radio"> defines a radio button. Radio buttons let a user select
ONLY ONE of a limited number of choices.
 HTML Forms: Text Fields (2/2)
43

 If we want to select by default a checkbox or a radio button, we can use checked

attribute. This attribute has no value.

<body>
<form>
<input type="radio" name="gender" value= "male" checked> Male<br>
<input type="radio" name= "gender" value= "female"> Female<br>

<input type="checkbox" name= "vehicle1" value= "Bike"> I have a bike<br>

<input type="checkbox" name= "vehicle2" value= "Car"> I have a car<br>
<input type="checkbox" name= "vehicle3" value="Boat" checked> I have a boat<br>
</form>
</body>
 HTML Forms: Select boxes
44

 The <select> element is used to create a drop-down list. The <option> tags
inside the <select> element define the available options in the list.

<body>
<form>
<select name= "car category" >
<option value= "volvo" >Volvo</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
 HTML Forms: Button
45

 There are various ways in HTML to create clickable buttons. You can create clickable
button using <input> tag.

 When you use the <input> element to create a button, the type of button you create is
specified using the type attribute. The type attribute can take the following values:

 Submit: This creates a button that automatically submits a form.

 Reset: This creates a button that automatically resets form controls to their initial
values.
 Button: This creates a button that is used to trigger a client-side script when the user
clicks that button.

<form action="action_page.php">
First name:<input type="text" name="firstname"><br>
Last name:<input type="text" name="lastname"> <br>
<input type="submit" value= "Submit" >
<input type="reset" value= "Reset">
</form>
 HTML5 Content Elements
46

 HTML5 offers new semantic elements to define different parts of a web page:

• <header>Defines a header for the document or a

section
• <article>Defines an article in the document
• <nav>Defines navigation links in the web page
• <section>Defines a section in the document
• <aside>Defines content aside from the page
(sidebar)
• <footer>Defines a footer for the document or a
section
HTML5 Content Elements
47