Lec 2 Web.pptxLec 2 Web.pptxLec 2 Web.pptx

10/11/2024 1
Web Engineering
Lecture No.02 11-10-2024
Instructor:
Ms. Atika Tanveer

Outline
 What is html?
 Tags
 Elements
 Heading
 Paragraphs
 Image
 Links
Order List
Table
10/11/2024 2

10/11/2024 3
<HTML>
Hypertext Markup Language

10/11/2024 4
What is HTML?
HTML is a language for describing web pages.
HTML stands for Hyper Text Markup Language
HTML is a markup language
A markup language is a set of markup tags
The tags describe document content
HTML documents contain HTML tags and plain text
HTML documents are also called web pages

10/11/2024 5
HTML Tags
 HTML markup tags are usually called HTML tags
 HTML tags are keywords (tag names) surrounded by angle
brackets like <html>
 HTML tags normally come in pairs like <b> and </b>
 The first tag in a pair is the start tag, the second tag is the end tag
 The end tag is written like the start tag, with a forward slash before
the tag name
 Start and end tags are also called opening tags and closing tags

10/11/2024 6
HTML Elements
 "HTML tags" and "HTML elements" are often used to
describe the same thing.
 An HTML element is everything from the start tag to
the end tag.
 The start tag is often called the opening tag. The end
tag is often called the closing tag
HTML Element:
<p>This is a paragraph.</p>

10/11/2024 7
HTML Attribute
Attribute is the property of an tag that specified in
the opening angle brackets. It supplies additional
information like color, size, home font-style etc to
the browser about a tag. E.g. most of the
common attributes are height, color, width, src,
border, align etc.

10/11/2024 8
Web Browsers
The purpose of a web browser (such as Google
Chrome, Internet Explorer, Firefox, Safari) is to read
HTML documents and display them as web pages.
The browser does not display the HTML tags, but
uses the tags to determine how the content of the
HTML page is to be presented/displayed to the user

10/11/2024 9
HOW TO CREATE AN HTML DOCUMENT
 The essential tags that are required to create a HTML document are:
 <HTML>.............</HTML>
 <HEAD>.............</HEAD>
 <BODY>.............</BODY>

10/11/2024 10
HTML Tag <HTML>
 The <HTML> tag encloses all other HTML tags and associated text within
your document. It is an optional tag. You can create an HTML document
that omits these tags, and your browser can still read it and display it. But
it is always a good form to include the start and stop tags. The format is:
 <HTML>
Your Title and Document (contains text with HTML tags) goes here
 </HTML>
 Most HTML tags have two parts, an opening tag and closing tag. The
closing tag is the same as the opening tag, except for the slash
 mark e.g. </HTML>. The slash mark is always used in closing tags.

10/11/2024 11
An HTML document has two distinct parts HEAD and BODY
<HTML>
<HEAD>
.............
</HEAD>
<BODY>
.............
</BODY>
 </HTML>

10/11/2024 12
HEAD Tag <HEAD>
HEAD tag comes after the HTML start tag. It contains TITLE
tag to give the document a title that displays on the
browsers title bar at the top. The Format is:
<HEAD>
<TITLE>
Your title goes here
</TITLE>
</HEAD>

10/11/2024 13
BODY Tag <BODY>
 The BODY tag contains all the text and graphics of the document with all the
HTML tags that are used for control and formatting of the page. The Format is:
<BODY>
Your Document goes here
</BODY>
An HTML document, web page can be created using a text editor, Notepad or
WordPad. All the HTML documents should have the extension .htm or html. It
require a web browser like Internet Explorer to view the document.

10/11/2024 14
Attributes used with <BODY>
 BGCOLOR: u s e d t o s e t t h e b a c k g r o u n d c o l o r f o r t h e
document Example:
<BODY BGCOLOR="yellow">
Your document text goes here.
</BODY>
 TEXT: used to set the color of the text of the document Example:
<BODY TEXT="red">Introduction to HTML:: 77
Document text changed to red color
</BODY>

10/11/2024 15
Attributes used with <BODY>
 MARGINS: set the left hand/right hand margin of the document LEFTMARGIN:
set the left hand margin of the document Example:
<BODY LEFTMARGIN="60">
This document is indented 60 pixels from the left hand side
of the page.
</BODY>
 TOPMARGIN: set the left hand margin of the document Example:
<BODY TOPMARGIN="60">
This document is indented 60 pixels from the top of the page.
</BODY>

10/11/2024 16
HTML Editors
HTML can be edited by using a professional HTML editor
like:
Microsoft Expression Web
Coffee Cup HTML Editor
Notepad ++ / Notepad
Visual Studio Code

10/11/2024 17
HTML Document Example
<!DOCTYPE html>
<html>
<head>
<title>title</title>
</head>
<body>
<p>This is my first paragraph.</p>
</body>
</html>

10/11/2024 18
HTML Paragraphs
Paragraphs are defined with the <p>
tag.
Example
<p>This is a paragraph</p>
<p>This is another paragraph</p>

10/11/2024 19
HTML Headings
HTML Headings
Headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the
least important heading.
Example
<h1>This is a heading</h1>

10/11/2024 20
Empty HTML Elements
 HTML elements with no content are called
empty elements.
 <br> is an empty element without a closing.
 Use the <br> tag if you want a line break (a
new line) without starting a new paragraph:
 <p>This is<br>a para<br>graph with line
breaks</p>

10/11/2024 21
HTML Lines
The <hr> tag creates a horizontal line in an HTML page.
The hr element can be used to separate content:
Example
<body> <hr> </body>
Output:

10/11/2024 22
HTML Comments
Comments can be inserted into the HTML code to
make it more readable and understandable.
Comments are ignored by the browser and are not
displayed.
Comments are written like this:
Example

10/11/2024 23
HTML Text Formatting
 HTML uses tags like <b> and <i> for formatting output,
like bold or italic text.

10/11/2024 24
HTML Text Formatting
Comments can be inserted into the HTML code to
make it more readable and understandable.
Comments are ignored by the browser and are not
displayed.
Comments are written like this:
Example

10/11/2024 25
HTML Hyperlinks (Links)
 The HTML <a> tag defines a hyperlink.
 A hyperlink (or link) is a word, group of words, or image that you can click on to
jump to another document.
 When you move the cursor over a link in a Web page, the arrow will turn into a little
hand.
 The most important attribute of the <a> element is the href attribute, which
indicates the link’s destination.
 By default, links will appear as follows in all browsers:
 An unvisited link is underlined and blue
 A visited link is underlined and purple
 An active link is underlined and red

10/11/2024 26
The HTML <title> Element
The <title> tag defines the title of the document.
The <title> element is required in all HTML/XHTML
documents.
The <title> element:
defines a title in the browser toolbar
provides a title for the page when it is added to
favorites
displays a title for the page in search-engine results

10/11/2024 27
The HTML <style> Element
The <style> tag is used to define style information for an
HTML document.
Inside the <style> element you specify how HTML elements
should render in a browser:
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

10/11/2024 28
HTML Images
In HTML, images are defined with the <img> tag.
The <img> tag is empty, which means that it contains
attributes only, and has no closing tag.
To display an image on a page, you need to use the src
attribute. Src stands for "source". The value of the src
attribute is the URL of the image you want to display.
Syntax for defining an image:
<img src="url" alt="some_text">

10/11/2024 29
HTML Tables
Tables are defined with the <table> tag.
A table is divided into rows (with the <tr> tag), and each
row is divided into data cells (with the <td> tag). td stands
for "table data," and holds the content of a data cell. A <td>
tag can contain text, links, images, lists, forms, other tables,
etc.

10/11/2024 30
HTML Tables Tags
 <table> used to create table
 <tr> table is divided into rows
 <td> each row is divided into data cells
 <th> Headings in a table
 <Caption> caption to the table
 <thead> Defines a table head Defines a table body
 <tbody> Defines a table head Defines a table body
 <tfoot> Defines a table footer
 <Cellspacing> amount of space between table cells
 <Cellpadding> space around the edges of each cell
 <Colspan> No of column working with will span
 <rowspan> No of rows working with will span
 <Border> attribute takes a number

10/11/2024 31
HTML Tables
<html><body> <h4>Horizontal Header:</h4> <table border="1">
<tr> <th>Name</th>
<th>Loan No</th> <th>Amount</th> </tr> <tr> <td>Jones</td>
<td>L-1</td>
<td>5000</td></tr> </table><br><br> <h4>Vertical Header:</h4> <table border="5"> <tr>
<th>Name</th>
<td>Jones</td> </tr>
<tr> <th>Loan No</th>
<td>L-1</td> </tr>
<tr> <th>Amount</th>
<td>5000</td></tr> </table> </body></html>

10/11/2024 33
HTML Unordered Lists
 An unordered list starts with the <ul> tag. Each list item starts with
the <li> tag.
 The list items are marked with bullets (typically small black circles).
 <ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
 How the HTML code above looks in a browser:
• Coffee
• Milk

10/11/2024 34
HTML Ordered Lists
 An ordered list starts with the <ol> tag. Each list item starts with the
<li> tag.
 The list items are marked with numbers.
 <ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
 How the HTML code above looks in a browser:
1. Coffee
2. Milk

10/11/2024 35
HTML Colors
 HTML colors are defined using a hexadecimal notation (HEX) for the
combination of Red, Green, and Blue color values (RGB).

10/11/2024 36
Font Colors :<FONT>
 By using <FONT> Tag one can specify the colors, size of the text.
Example:
<FONT> Your text goes here </FONT>
Attributes of <FONT> are:
- COLOR: Sets the color of the text that will appear on the
screen. It can be set by giving the value as #rr0000 for red (in RGB
hexadecimal format), or by name. Example: <FONT COLOR="RED">
Your text goes here </FONT>

10/11/2024 37
Font Size :<FONT>
 SIZE: Sets the size of the text, takes value between 1 and
 7, default is 3. Size can also be set relative to default size
 for example; SIZE=+X, where X is any integer value and it will add with the
default size.
 Example:
 <FONT SIZE=5> Font Size changes to 5 </FONT>
 FACE: Sets the normal font type, provided it is installed on the user’s machine.
 Example:
 <FONT FACE="ARIAL"> the text will be displayed in Arial</FONT>

Lec 2 Web.pptxLec 2 Web.pptxLec 2 Web.pptx

More Related Content

Similar to Lec 2 Web.pptxLec 2 Web.pptxLec 2 Web.pptx

Recently uploaded

Lec 2 Web.pptxLec 2 Web.pptxLec 2 Web.pptx