Web Page Design

Web Page Design

HTML

10.1 Introduction of HTML
 HTML stands for Hyper Text Markup Language. This is the text oriented language,
mainly used to create web pages or web sites. In this language, there is no need for
compiling so, it is not a programming language.
Tim Berners Lee invented HTML in early 1990 at CERN, the European practical physics laboratory in Switzerland.

# How HTML works ?
Browser sends request for HTML files to remote servers on the Internet by using address called URL (Uniform Resource Locator). When data returns, the browser interprets the HTML tags and displays the data as web pages.

# What are the advantages and disadvantages of using HTML?
Advantages
 Easy to use
 Loose syntax (although, being too flexible will not comply with standards)
 Supported on almost every browser, if not all browsers.
 Widely used; established on almost every websites if not websites.
 Very similar to XML syntax, which is increasingly used for data storage
 Free- You need not buy any software
 Easy to learn and code even for novice programmers

Disadvantages
 It cannot produce dynamic output alone, since it is a static language
 Sometimes, the structuring of HTML documents is hard to grasp.
 You have to keep up with deprecated tags, and make sure not to use them
 Deprecated tags appear because another language that works with HTML has
replaced the original work of the tags; thus the other language needs to be learned
(most of the time, it is CSS)
 Security features offered by HTML are limited.

10.2 Types of Tags
 The instructions that give signals to a browser that should do some other then throw the text on the screen is called HTML tags.
 A tag of HTML controls the structure of the page, formatting of the text and links between different pages.
 HTML tags always begin with an open angle bracket (<) and end with a close angle bracket (>).

There are 2 types of HTML tags:
a) Paired Tag or Container Tag
b) Singular or Unpaired or Empty Tag

a) Paired Tag or Container Tag
A tag is said to be a paired tag if, along with a companion tag or closing tag appears at the end. For example: the <b> tag is a paired tag.
The <b> tag comes with its closing tag </b> because the text contained between them to be rendered in Bold.
In paired tags, the first tag is called the opening tag and , the second tag is called the closing tag. The opening tag activates the effect and closing tag turns the effect off.

b) Singular or Unpaired or Empty Tag
A tag is said to be singular tag if it does not have a closing tag.
Example:  <br>, <img>, <hr>.

10.3 Basic Structure of HTML:
<html>
      <head>
              <title> Title of web page </title>
      </head>
      <body>
               All the contents of web page
      </body>
</html>

10.4 Character Formatting tag( Paragraphs, Heading and Text Format)
Paragraph Tag:
Paragraphs are defined with the <p> tag. It denotes a paragraph. Paragraphs allow adding text to a document in such a way that it will automatically adjust the end of the line to suit the window size of the browser in which it is being displayed.
HTML automatically adds an extra blank line before and after a paragraph.
Heading Tag:
HTML supports 6 different levels of headings. The highest level is <h1> and the lowest level is <h6>. These are generally used for major divisions or headings of the paragraph document.
HTML automatically adds an extra blank line before and after a heading.
Text Formatting Tag:
This process of changing the appearance of the HTML document is called text formatting, and the tag used for doing so is called text formatting tag.
For Example:
<b> BOLD</b>
<u> Underline </u>
<i> Italic </i>
Font Tag:
It uses Font name, color and size.
Syntax:
< font
size = “value” i.e. 1 to 7 (default size is 3)
color= “color name”
face= “font name”>
Example of Font Tag:
<html>
<head>
<title> Sultan Film -2016 </title>
</head>
<body>
<p>
Sultan is a 2016 Indian romantic sports-drama film directed by Ali Abbas Zafar. Produced by Aditya Chopra under the Yash Raj Films banner, the film stars Salman Khan as the title character opposite Anushka Sharma. The film focuses on Sultan Ali Khan, a wrestling champion from Haryana whose successful career creates a rift in his personal life. The film was released worldwide on 6 July 2016 and grossed approximately approx. 584 crore worldwide and became the fourth highest grossing Indian film of all time.
</p>
<font size = 5 color ="red" face="candara">
Sultan is a 2016 Indian romantic sports-drama film directed by Ali Abbas Zafar. Produced by Aditya Chopra under the Yash Raj Films banner, the film stars Salman Khan as the title character opposite Anushka Sharma. The film focuses on Sultan Ali Khan, a wrestling champion from Haryana whose successful career creates a rift in his personal life. The film was released worldwide on 6 July 2016 and grossed approximately approx. 584 crore worldwide and became the fourth highest grossing Indian film of all time.
</font>
</body>
</html>

Output: Image

10.5 Create an ordered and unordered list:
HTML supplies several list elements. Most list elements are composed of one or more <li>
elements.
Ordered List(OL): An ordered list starts with the <ol> tag and ends with </ol> tag.
Each lists item start with the <li> tag and ends with </li>. Items in this list are numbered automatically by the browser.
Syntax:
<ol type= “1” start = “ initial value”>
<li> ..... </li>
<li>......</li>
</ol>

Unordered List(UL): An unordered list is list of items which may appears in any particular order.
It is usually displays as a bulleted list of item.
It is start with the <ul> tag and ends with </ul> tag. Each list item starts with the <li> tag.
Syntax:
<ul type= “circle” / “disc”/ “square”>
<li>.......</li>
</ul>

10.6 Insert Images and Objects:
<img> elements allows an image file to be inserted within an HTML document.
These images make the web page more attractive. It is an empty tag.
Syntax:
<img
src= “image_url”
align= “top” | “middle” | “bottom”| “left” | “right” | “ center”
width= “pixels”
height = “pixels”
border= “border width_vlaue”>

10.7 Creating Hyper-Link
Hyperlink is the backbone of the web. It is a graphic or piece of text that links to another web
page. It is created so that clicking on a hyperlink, automatically sends the viewer to another
destination.
Anchor tag <a> is used to mark the text as a hypertext link.
Clicking on a special spot opens a new page or allows jumping to the different locations of the one page. Such links are called hyperlink or hyper text or hotspot.
There are two types of links:
a) Internal Link: These are links within a document which a document helps in the navigation of large document.
For example: we have “move to top” link on some of the web page to navigate at the top of the document.
b) External Link: These are links to the web page of other web site.
For example, if we are using Gmail and we navigate to Facebook from Gmail, those links are called external links which has the full URL.
Syntax:
<a href= “file_url”> ........................</a>
Example: <a href="https://www.alk.com.np">ALK Website</a>


10.8 Create Table:
A table is a two dimensional matrix, consisting of rows and columns. Tables are intended for displaying data in rows and columns on a web page.
Syntax:
<table border= “value”>
<tr>
<th> Table Header-1</th>
<th> Table Header-2</th>
</tr>
<tr>

<td> Table data-2 </td>
<td> Table data -2</td>
</tr>
</table>


 # Concepts of CSS(Cascading Style Sheet):
A cascading style sheet is a document containing style information that can be referenced
by multiple web page, style define appearance and formatting of content on web pages
and allow authors more control over how contents is displayed in browser.
Generally , there are three types of styles.
a) Inline Style
b) Internal Style Sheet
c) External Style Sheet


Example of Inline CSS:
<html>
<head>
<title> Images with CSS </title>
</head>
<body>
<h1> Using inline CSS in Image </h1>
<img src="JanakiTemple.jpg" style="height:300px; width:350px; border-color:#CCCCCC; border-style:solid; border-width:thin">
<img src="alk.jpg"  style="height:300px; width:350px; border-color:#CCCCCC; border-style:solid; border-width:thin">
</body>
</html>

Example of Internal CSS:
<html>
<head>
<title> Images with CSS </title>
<style type="text/css">
img
{
height:300px;width:350px;
border-color:#CCCCCC;border-style:solid;border-width:thin;
}
</style>
</head>
<body>
<h1> Using CSS in Image </h1>
<img src="JanakiTemple.jpg">
<img src="alk.jpg">
</body>
</html>

-The End-
Exercise:
Homework [Unit-10]
1. What is HTML? Write basic structure of HTML.
2. Explain the <A> and <Img> tag with its properties and value.
3. Define HTML. Write its uses.
4. What is hyperlink? Explain different types of links in the web page designing.
5. What is HTML. Explain the importance in web page designing.
6. What is HTML tag? Explain about Heading Tag, Text Formatting Tag and Paragraph Tag.
7. What is HTML? List out the advantages and disadvantages of HTML.
8. What is HTML? Describe the objectives of HTML.