IT6012 Web
Fundamentals
Introduction to HTML
• WWW – World Wide Web, which is also known as a Web, is a collection of websites or web
pages stored in web servers and connected to local computers through the internet. These
websites contain text pages, digital images, audios, videos, etc. Users can access the
content of these sites from any part of the world over the internet using their devices such
as computers, laptops, cell phones, etc. The WWW, along with internet, enables the retrieval
and display of text and media to your device.
• HTTP: - Stands for Hyper Text Transport Protocol,
• Communication between clients and servers is done by HTTP requests and HTTP responses:
1. A client (a browser) sends an HTTP request to the web
2. A web server receives the request
3. The server runs an application to process the request
4. The server returns an HTTP response (output) to the browser
5. The client (the browser) receives the response
• For further Notes please go through:
2
https://www.w3schools.com/whatis/whatis_http.asp
• Web-server: Whenever we visit a website, we are actually engaging with a web server to
retrieve the web page you wish to view. The server responds to your request by sending the
web page to your computer or device before you can view it in your web browser (known as
a web client). Ex: (Tomcat, Apache, IIS, nginx…)
• Web-Browser: Web browser is an application software to explore www (World Wide Web).
It provides an interface between the server and the client and it requests to the server for
web documents and services. It works as a compiler to render HTML which is used to design
a webpage.
Ex: (Firefox, Internet Explorer/Microsoft Edge, Opera, Chrome, Safari…)
Programing languages for Web-development (Python, JavaScript, PHP, ASP.NET…)
For further Notes please go through:
https://www.techtarget.com/whatis/definition/Web-server 3
What is HTML?
• HTML stands for Hyper Text Markup Language
• It is the main language for creating web pages
• HTML is a markup language not a programming language.
• It consists of TAGS such as <h1>,<table>, <p> and so on which
are used to describe the content of a webpage
• HTML tags form the building blocks of all websites.
• The browser uses the tags to interpret the content of the page.
4
HTML Tags
• HTML tags generally come in pairs like <h1> and </h1>
• The first tag is known as the start or opening tag, the second
tag is the end or closing tag and requires a forward slash /
• Tags are not case sensitive
Some common tags:
HTML Code Sample
• <H1>Header 1</H1> Sets header size (1 is the
largest)
• <P> </P> Paragraph break
• <B>bold</B> makes text bold
• <I>italic</I> makes text italic
5
HTML Tags
• <small>Small text</small>
• <mark>Marked text</mark>
• <del>Text to delete</del>
• <ins>Text to insert</ins>
• <sub>Lower index</sub>
• <sup>Upper index</sup>
• <font> Defines font, color, and size for text
• <strong> Defines important text
For more tags refers to: https://www.w3schools.com/tags/ref_byfunc.asp
6
HTML Empty Tags
• A very small number of tags are known as empty or self-closing
tags because they do not surround content. These tags are not
used in pairs and there is no closing tag.
Examples:
• <BR> Forces a line break
• <HR> Displays a horizontal line
• <IMG> Displays an image
7
Structure of a Web Page
• HTML for a page is always enclosed by <html></html> tags
• Within the html tags we have a <head> and <body> section
• The <head> section should contain a title. This provides a title for the page when
it is added to favorites and displays a title for the page in search-engine results,
but will not be displayed when the page opens in a browser. The <head> section
may also contain JavaScript and links to style sheets (more about these later in the
course)
• The <body> section contains the content of the web page:
8
Structure of a Web Page
• When the html from the previous slide is sent to your browser the result should
look similar to the example below
9
Another Example of HTML-document
<!DOCTYPE html>
<html>
<head>
<title> Bahrain Polytechnic </title>
</head>
<body>
<h1> EDICT-School </h1>
<p> Information and Communication Technology Bachelor Program </p>
</body>
</html>
1
0
Using a Text Editor
• In the beginning writing html in a text editor is a great way to learn.
• All we have to do is write html in a NotePad file, save it with a html
extension and open it in a browser
1
1
Tutorial 1
• Open NotePad or NotePad++ and write the html shown in the
previous slide.
• Save the file as index.html.
• Right-slick the file, select Open With and choose a browser.
• The page opens in the browser
1
2
Adding an attribute to a tag
• HTML tags can have attributes, which specify more information
about what the tag should do. The attribute is entered in the
opening tag and the value of the attribute has to be in quotes.
• Examples
If we want to add a colour to text the tag will look as follows:
<h1 style=“color:green”> this text is green </h1>
To set the font to a particular size:
<h1 style=“font-size:200%”> this text is size 200% </h1>
Usage of multiple attributes within single tag
<p style="color:red; text-align:center; font-size:800%; font-
Family:Arial">
<b> Bahrain Polytechnic</b> <br> <i> EDICT ICT</i> </p>
1
3
Commenting HTML
• A comment tag <!--> added helps to define purpose of the page for
example
• <!-- Here we format text adding colour, bold, Italic, underling,
subscript -->
1
4
Lab 1
• In this exercise you create a html page and format text using
html skills you have learned so far.
• Your page should look like the next slide
• Note: you can download the text from Moodle. The font should
be Arial. The page should have an appropriate title. Save the
page as index.html in a folder called HouseBuilder
1
5
HTML Lists
• To create lists we use the tags <ol></ol> and <ul></ul> which
are Ordered (i.e. numbered) and Unordered (i.e. bulleted)
• In between the list tags we use <li></li> to create each list item
1
6
Examples of Ordered and Unordered Lists
<ol type="A"> <ul type="square">
<lh> Ordered list <lh> Unordered list (bullets)
</lh> </lh>
<li> Barcelona <li> Bahrain</li>
</li>
<li> Georgia</li>
<li> Real Madrid
</li> </ul>
</ol>
1
7
Lab 2
• Create a page called courses.html which displays two lists as
in the example below:
1
8
Lab 3
• Create a second page called location.html as shown. The text
is available in Moodle. Save it in the same HouseBuilder folder.
1
9
Thank you
