Website designing using HTML

1. UNIT VI
Web Site Designing
By Dr. Dhobale J V
Associate Professor
School of Engineering & Technology
RNB Global University, Bikaner
RNB Global University, Bikaner. 1

2. Objectives
 Introduction to HTML;
 Tags and attributes: Text Formatting, Fonts.
 Hypertext Links.
 Tables, Images, Lists, Forms, Frames.
 Cascading Style Sheets.
2RNB Global University, Bikaner.

3. What is HTML
 HTML stands for Hyper Text Markup
Language
 HTML describes the structure of Web pages
using markup
 HTML elements are represented by tags
 HTML tags label pieces of content such as
"heading", "paragraph", "table", and so on
 Browsers do not display the HTML tags, but
use them to render the content of the page.
3RNB Global University, Bikaner.

4. What is HTML - Structure
4RNB Global University, Bikaner.

5. What is HTML - Structure
5RNB Global University, Bikaner.

6. What is HTML - Structure
6RNB Global University, Bikaner.

7. HTML - tags
 HTML tags are element names surrounded by
angle brackets:
 HTML tags normally come in pairs like <p>
and </p>
 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, but
with a forward slash inserted before the tag
name.
7RNB Global University, Bikaner.

8. Web- browser
 The purpose of a web browser (Chrome, IE,
Firefox, Safari) is to read HTML documents
and display them.
 The browser does not display the HTML tags,
but uses them to determine how to display the
document:
8RNB Global University, Bikaner.

9. HTML Page Structure
9RNB Global University, Bikaner.

10. HTML Page Structure
 The <!DOCTYPE> Declaration:
 The <!DOCTYPE> declaration represents the
document type, and helps browsers to display
web pages correctly.
 It must only appear once, at the top of the
page (before any HTML tags).
 The <!DOCTYPE> declaration is not case
sensitive.
 The <!DOCTYPE> declaration for HTML5 is:
10RNB Global University, Bikaner.

11. HTML Versions
11RNB Global University, Bikaner.

12. HTML Editors
 Write HTML Using Notepad or TextEdit
 Web pages can be created and modified by
using professional HTML editors.
 However, for learning HTML itis always
recommended a simple text editor like
Notepad (PC) or TextEdit (Mac).

12RNB Global University, Bikaner.

13. HTML Editors
 Write HTML Using Notepad or TextEdit:
13RNB Global University, Bikaner.

14. HTML Editors
 Write HTML Using Notepad or TextEdit:
 Save the file on your computer. Select File >
Save as in the Notepad menu.
 Name the file "index.htm" and set the
encoding to UTF-8 (which is the preferred
encoding for HTML files).
14RNB Global University, Bikaner.

15. HTML Editors
 View HTML File:
 Open the saved HTML file in your favorite
browser (double click on the file, or right-click -
and choose "Open with").
 The result will look much like this:
15RNB Global University, Bikaner.

16. HTML Basic Examples
16RNB Global University, Bikaner.

17. HTML Basic Examples
 HTML Attributes:
 All HTML elements can have attributes
 Attributes provide additional
information about an element
 Attributes are always specified in the start tag
 Attributes usually come in name/value pairs
like: name="value“
17RNB Global University, Bikaner.

18. HTML Basic Examples
 Headings:
 <h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
 HTML headings are defined with
the <h1> to <h6> tags.
 <h1> defines the most important heading.
<h6> defines the least important heading.
18RNB Global University, Bikaner.

19. HTML Basic Examples
 Headings:
19RNB Global University, Bikaner.

20. HTML Basic Examples
 Paragraphs:
 HTML paragraphs are defined with
the <p> tag.
20RNB Global University, Bikaner.

21. HTML Basic Examples
 Paragraphs:
21RNB Global University, Bikaner.

22. HTML Basic Examples
 HTML Line Breaks:
 The HTML <br> element defines a line break.
 Use <br> if you want a line break (a new line)
without starting a new paragraph:
 <p>This is<br>a paragraph<br>with line
breaks.</p>
22RNB Global University, Bikaner.

23. HTML Basic Examples
 HTML Prefomatting:
 The HTML <pre> element defines
preformatted text.
 The text inside a <pre> element is displayed in
a fixed-width font (usually Courier), and it
preserves both spaces and line breaks:
23RNB Global University, Bikaner.

24. HTML Basic Examples
 HTML Prefomatting:
24RNB Global University, Bikaner.

25. HTML Basic Examples
 HTML Style:
 Setting the style of an HTML element, can be
done with the style attribute.
 The HTML style attribute has the
following syntax:
 <tagname style="property:value;">
 The property is a CSS property. The value is
a CSS value. 25RNB Global University, Bikaner.

26. HTML Basic Examples
 HTML Style:
 The background-color property defines the
background color for an HTML element.
 This example sets the background color for a
page to powderblue:
26RNB Global University, Bikaner.

27. HTML Basic Examples
 HTML Style:
27RNB Global University, Bikaner.

28. HTML Basic Examples
 HTML Colors:
 In HTML, a color can be specified by using a
color name:
 HTML supports 140 standard color names.
28RNB Global University, Bikaner.

29. HTML Basic Examples
 HTML Text Color:
 The color property defines the text color for an
HTML element:
29RNB Global University, Bikaner.

30. HTML Basic Examples
 HTML Fonts:
 The font-family property defines the font to be
used for an HTML element:
30RNB Global University, Bikaner.

31. HTML Basic Examples
 HTML Text Size:
 The font-size property defines the text size for
an HTML element:
31RNB Global University, Bikaner.

32. HTML Basic Examples
 HTML Text Alignment:
 The text-align property defines the horizontal
text alignment for an HTML element:
32RNB Global University, Bikaner.

33. HTML Basic Examples
 HTML Text Formatting:
33RNB Global University, Bikaner.

34. HTML Basic Examples
 HTML Text Formatting:
 Formatting elements were designed to display
special types of text:
 <b> - Bold text
 <strong> - Important text
 <i> - Italic text
 <em> - Emphasized text
 <mark> - Marked text
 <small> - Small text
 <del> - Deleted text
 <ins> - Inserted text
 <sub> - Subscript text
 <sup> - Superscript text
34RNB Global University, Bikaner.

35. HTML Basic Examples
 HTML Text Formatting:
 <b>This text is bold</b>
 <strong>This text is strong</strong>
 <i>This text is italic</i>
 <em>This text is emphasized</em>
 <h2>HTML <small>Small</small> Formatting</h2>
 <p>My favorite color is <del>blue</del> red.</p>
 <p>My favorite <ins>color</ins> is red.</p>
35RNB Global University, Bikaner.

36. HTML Basic Examples
 HTML <q> for Short Quotations:
 The HTML <q> element defines a short
quotation.
 Browsers usually insert quotation marks
around the <q> element.
36RNB Global University, Bikaner.

37. HTML Basic Examples
 HTML Links:
 HTML links are defined with the <a> tag:
 Example:
 <a href="https://www.rnbglobal.edu.in">This is
RNB link</a>
37RNB Global University, Bikaner.

38. HTML Basic Examples
 HTML Links:
38RNB Global University, Bikaner.

39. HTML Basic Examples
 HTML Links:
39RNB Global University, Bikaner.

40. HTML Basic Examples
 HTML Images:
 HTML images are defined with the <img> tag.
 The source file (src), alternative text (alt),
width, and height are provided as attributes:
 <img src=“c:desktopnatue.jpg" alt=“nature" w
idth="104” height="142">
40RNB Global University, Bikaner.

41. HTML Basic Examples
 HTML Horizontal Rules:
 The <hr> tag defines a thematic break in an
HTML page, and is most often displayed as a
horizontal rule.
 The <hr> element is used to separate content
(or define a change) in an HTML page:
41RNB Global University, Bikaner.

42. HTML Basic Examples
 HTML Horizontal Rules:
42RNB Global University, Bikaner.

43. HTML Basic Examples
 HTML Table:
43RNB Global University, Bikaner.

44. HTML Basic Examples
 HTML Table:
 An HTML table is defined with the <table> tag.
 Each table row is defined with the <tr> tag.
 A table header is defined with the <th> tag.
 By default, table headings are bold and
centered.
 A table data/cell is defined with the <td> tag.
44RNB Global University, Bikaner.

45. HTML Basic Examples
 HTML Table:
45RNB Global University, Bikaner.

46. HTML Basic Examples
 HTML Lists:
46RNB Global University, Bikaner.

47. HTML Basic Examples
 HTML Lists:
 An unordered list starts with the <ul> tag.
Each list item starts with the <li> tag.
 The list items will be marked with bullets (small
black circles) by default:
47RNB Global University, Bikaner.

48. HTML Basic Examples
 HTML Lists:
 Unordered lists:
48RNB Global University, Bikaner.

49. HTML Basic Examples
 HTML Lists:
 Ordered HTML List
 An ordered list starts with the <ol> tag. Each
list item starts with the <li> tag.
 The list items will be marked with numbers by
default:
49RNB Global University, Bikaner.

50. HTML Basic Examples
 HTML Lists:
 Ordered HTML List
50RNB Global University, Bikaner.

51. HTML Basic Examples
 HTML Lists:
 HTML Description Lists
 HTML also supports description lists.
 A description list is a list of terms, with a
description of each term.
 The <dl> tag defines the description list,
the <dt> tag defines the term (name), and
the <dd> tag describes each term:
51RNB Global University, Bikaner.

52. HTML Basic Examples
 HTML Lists:
 HTML Description Lists
52RNB Global University, Bikaner.

53. HTML Basic Examples
 HTML Lists:
 HTML Nesting Lists
53RNB Global University, Bikaner.

54. HTML Frames
 iframe :
 An iframe is used to display a web page within
a web page.
 An HTML iframe is defined with
the <iframe> tag:
 The src attribute specifies the URL (web
address) of the inline frame page.
54RNB Global University, Bikaner.

55. HTML Frames
 iframe Set Height and Width :
 Use the height and width attributes to specify the size
of the iframe.
 The attribute values are specified in pixels by default,
but they can also be in percent (like "80%").
55RNB Global University, Bikaner.

56. HTML Frames
 Iframe - Remove the Border:
 By default, an iframe has a border around it.
 To remove the border, add the style attribute
and use the CSS border property:
56RNB Global University, Bikaner.

57. HTML Frames
 Iframe - Remove the Border:
 With CSS, you can also change the size, style and
color of the iframe's border:
57RNB Global University, Bikaner.

58. HTML Frames
 Iframe - Target for a Link:
 An iframe can be used as the target frame for a link.
 The target attribute of the link must refer to
the name attribute of the iframe:
58RNB Global University, Bikaner.

59. HTML Frames
 Iframe - Target for a Link:
59RNB Global University, Bikaner.

60. Styling HTML with CSS
 CSS stands for Cascading Style Sheets.
 CSS describes how HTML elements are to be
displayed on screen, paper, or in other media.
 CSS saves a lot of work. It can control the layout of
multiple web pages all at once.
 CSS can be added to HTML elements in 3 ways:
1. Inline - by using the style attribute in HTML elements
2. Internal - by using a <style> element in the <head> section
3. External - by using an external CSS file
60RNB Global University, Bikaner.

61. Styling HTML with CSS
 The most common way to add CSS, is to keep the
styles in separate CSS files. However, here we will
use inline and internal styling.
1. Inline CSS:
 An inline CSS is used to apply a unique style to a
single HTML element.
 An inline CSS uses the style attribute of an HTML
element.
 This example sets the text color of the <h1> element
to blue
61RNB Global University, Bikaner.

62. Styling HTML with CSS
62RNB Global University, Bikaner.

63. Styling HTML with CSS
2. Internal CSS
 An internal CSS is used to define a style for a single
HTML page.
 An internal CSS is defined in the <head> section of an
HTML page, within a <style> element:
63RNB Global University, Bikaner.

64. Styling HTML with CSS
2. Internal CSS
64RNB Global University, Bikaner.

65. Styling HTML with CSS
3. External CSS:
 An external style sheet is used to define the style for
many HTML pages.
 With an external style sheet, you can change the
look of an entire web site, by changing one file!
 To use an external style sheet, add a link to it in the
<head> section of the HTML page:
65RNB Global University, Bikaner.

66. Styling HTML with CSS
3. External CSS:
66RNB Global University, Bikaner.

67. Styling HTML with CSS
3. External CSS:
 An external style sheet can be written in any text
editor. The file must not contain any HTML code, and
must be saved with a .css extension.
 Here is how the "styles.css" looks:
67RNB Global University, Bikaner.

68. Reviews
 Introduction to HTML;
 Tags and attributes: Text Formatting, Fonts.
 Hypertext Links.
 Tables, Images, Lists, Forms, Frames.
 Cascading Style Sheets.
68RNB Global University, Bikaner.

69. Thank You!
RNB Global University, Bikaner. 69