Scribd
Upload
21 views20 pages

PL Lec 1

Uploaded by

ahmadnouh07
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
21 views20 pages

PL Lec 1

Uploaded by

ahmadnouh07
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/ 20

‫كلية الهندسة المعلوماتية‬

Programming Languages
Lecture One

HTML Basics

Prepared By

Dr. Rawan Koroni


‫كلية الهندسة المعلوماتية‬

1- What is HTML?
HTML stands for Hyper Text Markup Language, which is the most widely
used language on Web to develop web pages.

2- HTML Tags:
Sr.No Tag & Description

1 <!DOCTYPE...>

This tag defines the document type and HTML version.


2 <html>
This tag encloses the complete HTML document and mainly
comprises of document header which is represented by
<head>...</head> and document body which is represented by
<body>...</body> tags.
3 <head>
This tag represents the document's header which can keep other
HTML tags like <title>, <link> etc.
4 <title>
The <title> tag is used inside the <head> tag to mention the document
title.
5 <body>
This tag represents the document's body which keeps other HTML
tags like <h1>, <div>, <p> etc.
6 <h1>
This tag represents the heading.
7 <p>
This tag represents a paragraph.
‫كلية الهندسة المعلوماتية‬

3- Quick Examples:
For the following examples, just copy the HTML code to a text file,
and modify the extension to .html instead of .txt, then open the
file with any browser.

 Heading Tags Example:


HTML Code Result
<!DOCTYPE html>
<html>

<head>
<title>Heading Example</title>
</head>

<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>

</html>
‫كلية الهندسة المعلوماتية‬

 Paragraph Tag Example:


HTML Code Result
<!DOCTYPE html>
<html>

<head>
<title>Paragraph Example</title>
</head>

<body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>

</html>

 Line Break Tag Example:


HTML Code Result
<!DOCTYPE html>
<html>

<head>
<title>Line Break Example</title>
</head>

<body>
<p>Hello<br />
You delivered your assignment
ontime.<br />
Thanks<br />
Mahnaz</p>
</body>

</html>
‫كلية الهندسة المعلوماتية‬

4- HTML Tag vs. Element?


An HTML element is defined by a starting tag. If the element contains other
content, it ends with a closing tag.

For example, <p> is starting tag of a paragraph and </p> is closing tag of
the same paragraph but <p>This is paragraph</p> is a paragraph element.

5- Nested HTML Elements:


It is very much allowed to keep one HTML element inside another HTML
element.

Example:

HTML Code Result


<!DOCTYPE html>
<html>

<head>
<title>Nested Elements Example</title>
</head>

<body>
<h1>This is <i>italic</i> heading</h1>
<p>This is <u>underlined</u> paragraph</p>
</body>

</html>

6- HTML Attribute (For more details, do a quick search):


We have seen few HTML tags and their usage like heading tags <h1>, <h2>,
paragraph tag <p> and other tags. We used them so far in their simplest
form, but most of the HTML tags can also have attributes, which are extra
bits of information.
‫كلية الهندسة المعلوماتية‬

An attribute is used to define the characteristics of an HTML element and is


placed inside the element's opening tag. All attributes are made up of two
parts − a name and a value.

Core attributes:

 Id
 Title
 Class
 Style

Generic attributes:

Attribute Options Function

align right, left, center Horizontally aligns tags

valign top, middle, bottom Vertically aligns tags within an HTML


element.

bgcolor numeric, hexidecimal, RGB Places a background color behind an element


values

background URL Places a background image behind an


element

id User Defined Names an element for use with Cascading


Style Sheets.

class User Defined Classifies an element for use with Cascading


Style Sheets.

width Numeric Value Specifies the width of tables, images, or table


cells.

height Numeric Value Specifies the height of tables, images, or


table cells.
‫كلية الهندسة المعلوماتية‬

Example:

HTML Code <!DOCTYPE html>


<html>

<head>
<title>Align Attribute Example</title>
</head>

<body>
<p id = "p1" align = "left">This is left aligned</p>
<p id = "p2" align = "center">This is center aligned</p>
<p id = "p3" align = "right">This is right aligned</p>
</body>

</html>
Result

7- Comments:
Comment is a piece of code which is ignored by any web browser. It is a
good practice to add comments into your HTML code, especially in complex
documents, to indicate sections of a document, and any other notes to
anyone looking at the code. Comments help you and others understand
your code and increases code readability.
‫كلية الهندسة المعلوماتية‬

Example:

<!DOCTYPE html>
<html>

<head> <!-- Document Header Starts -->


<title>This is document title</title>
</head> <!-- Document Header Ends -->

<body>
<p>Document content goes here.....</p>
</body>

</html>

8- Images:
You can insert any image in your web page by using <img> tag. Following is
the simple syntax to use this tag.
<img src = "Image URL" ... attributes-list/>

Example: (To try following example, keep your HTML file test.html and
image file test.png in the same directory)

HTML Code <!DOCTYPE html>


<html>

<head>
<title>Using Image in Webpage</title>
</head>

<body>
<p>Simple Image Insert</p>
<img src = "/html/images/test.png" alt = "Test Image" />
</body>

</html>
‫كلية الهندسة المعلوماتية‬

Result

Example: (Set Image Width/Height)

HTML Code <!DOCTYPE html>


<html>

<head>
<title>Set Image Width and Height</title>
</head>

<body>
<p> Simple Image Insert</p>
<img src = "/html/images/test.png" alt = "Test Image" width
= "150" height = "100"/>
</body>

</html>
Result
‫كلية الهندسة المعلوماتية‬

9- Tables:
The HTML tables allow web authors to arrange data like text, images, links,
other tables, etc. into rows and columns of cells.

The HTML tables are created using the <table> tag in which the <tr> tag is
used to create table rows and <td> tag is used to create data cells. The
elements under <td> are regular and left aligned by default

Example:

HTML Code <!DOCTYPE html>


<html>

<head>
<title>HTML Tables</title>
</head>

<body>
<table border = "1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>

<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>

</body>
</html>
Result
‫كلية الهندسة المعلوماتية‬

10- Unordered Lists:


An unordered list is a collection of related items that have no special order
or sequence. This list is created by using HTML <ul> tag. Each item in the list
is marked with a bullet

Example:

HTML Code <!DOCTYPE html>


<html>

<head>
<title>HTML Unordered List</title>
</head>

<body>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>

</html>
Result
‫كلية الهندسة المعلوماتية‬

11- Ordered Lists:


Example:

HTML Code <!DOCTYPE html>


<html>

<head>
<title>HTML Ordered List</title>
</head>

<body>
<ol>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>

</html>
Result

12- Linking Documents:


A webpage can contain various links that take you directly to other pages
and even specific parts of a given page.

A link is specified using HTML tag <a>. This tag is called anchor tag and
anything between the opening <a> tag and the closing </a> tag becomes
part of the link and a user can click that part to reach to the linked
document. Following is the simple syntax to use <a> tag.
<a href = "Document URL" ... attributes-list>Link Text</a>
‫كلية الهندسة المعلوماتية‬

Example:

HTML Code <!DOCTYPE html>


<html>

<head>
<title>Hyperlink Example</title>
</head>

<body>
<p>Click following link</p>
<a href = "https://www.example.com">Example</a>
</body>

</html>
Result

13- Style Sheet:


Cascading Style Sheets (CSS) describe how documents are presented on screens,
in print, or perhaps how they are pronounced.

Cascading Style Sheets (CSS) provide easy and effective alternatives to specify
various attributes for the HTML tags. Using CSS, you can specify a number of style
properties for a given HTML element. Each property has a name and a value,
separated by a colon (:). Each property declaration is separated by a semi-colon
(;).
‫كلية الهندسة المعلوماتية‬

Example:

HTML Code <!DOCTYPE html>


<html>

<head>
<title>HTML CSS</title>
</head>

<body>
<p style = "color:green; font-size:24px;" >Hello,
World!</p>
</body>

</html>

Result

You can use CSS in three ways in your HTML document:

 External Style Sheet: Define style sheet rules in a separate .css file
and then include that file in your HTML document using HTML <link>
tag.
 Internal Style Sheet: Define style sheet rules in header section of the
HTML document using <style> tag.
 Inline Style Sheet: Define style sheet rules directly along-with the
HTML elements using style attribute.
‫كلية الهندسة المعلوماتية‬

External Style Sheet:

If you need to use your style sheet to various pages, then its always
recommended to define a common style sheet in a separate file. A cascading style
sheet file will have extension as .css and it will be included in HTML files using
<link> tag.

Example (create a style sheet file style.css in the same directory of html file):

style.css file .red {


color: red;
}
.thick {
font-size:20px;
}
.green {
color:green;
}

HTML Code <!DOCTYPE html>


<html>

<head>
<title>HTML External CSS</title>
<link rel = "stylesheet" type = "text/css" href =
"/html/style.css">
</head>

<body>
<p class = "red">This is red</p>
<p class = "thick">This is thick</p>
<p class = "green">This is green</p>
<p class = "thick green">This is thick and green</p>
</body>

</html>
‫كلية الهندسة المعلوماتية‬

Result

Internal Style Sheet:

If you want to apply Style Sheet rules to a single document only, then you can
include those rules in header section of the HTML document using <style> tag.

Rules defined in internal style sheet overrides the rules defined in an external CSS
file.

Example:

HTML Code <!DOCTYPE html>


<html>

<head>
<title>HTML Internal CSS</title>

<style type = "text/css">


.red {
color: red;
}
.thick{
font-size:20px;
}
.green {
color:green;
}
</style>
</head>
‫كلية الهندسة المعلوماتية‬

<body>
<p class = "red">This is red</p>
<p class = "thick">This is thick</p>
<p class = "green">This is green</p>
<p class = "thick green">This is thick and green</p>
</body>

</html>
Result

Inline Style Sheet:

You can apply style sheet rules directly to any HTML element using style attribute
of the relevant tag. This should be done only when you are interested to make a
particular change in any HTML element only.

Rules defined inline with the element overrides the rules defined in an external
CSS file as well as the rules defined in <style> element.

Example:

HTML Code <!DOCTYPE html>


<html>

<head>
<title>HTML Inline CSS</title>
</head>

<body>
<p style = "color:red;">This is red</p>
<p style = "font-size:20px;">This is thick</p>
<p style = "color:green;">This is green</p>
‫كلية الهندسة المعلوماتية‬

<p style = "color:green;font-size:20px;">This is thick and


green</p>
</body>

</html>
Result

14- JavaScript:
A script is a small piece of program that can add interactivity to your website. For
example, a script could generate a pop-up alert box message, or provide a
dropdown menu. This script could be written using JavaScript or VBScript.

You can write various small functions, called event handlers using any of the
scripting language and then you can trigger those functions using HTML
attributes.

Now-a-days, only JavaScript and associated frameworks are being used by most of
the web developers, VBScript is not even supported by various major browsers.

You can keep JavaScript code in a separate file and then include it wherever it's
needed, or you can define functionality inside HTML document itself. Let's see
both the cases one by one with suitable examples.
‫كلية الهندسة المعلوماتية‬

External JavaScript

If you are going to define a functionality which will be used in various HTML
documents then it's better to keep that functionality in a separate JavaScript file
and then include that file in your HTML documents. A JavaScript file will have
extension as .js and it will be included in HTML files using <script> tag.

Example (create a javascript file script.js in the same directory of html file):

script.js file function Hello() {


alert("Hello, World");
}

HTML Code <!DOCTYPE html>


<html>

<head>
<title>Javascript External Script</title>
<script src = "/html/script.js" type =
"text/javascript"/></script>
</head>

<body>
<input type = "button" onclick = "Hello();" name = "ok"
value = "Click Me" />
</body>

</html>
Result
‫كلية الهندسة المعلوماتية‬

Internal JavaScript

You can write your script code directly into your HTML document. Usually we
keep script code in header of the document using <script> tag, otherwise there is
no restriction and you can put your source code anywhere in the document but
inside <script> tag.

Example:

HTML Code <!DOCTYPE html>


<html>

<head>
<title>JavaScript Internal Script</title>

<script type = "text/JavaScript">


function Hello() {
alert("Hello, World");
}
</script>
</head>

<body>
<input type = "button" onclick = "Hello();" name = "ok"
value = "Click Me" />
</body>

</html>
Result

You might also like