Slide 1 : INTRODUCTION TO HTML By Miss Supreet Saini

What is the web? : What is the web? The web is a whole bunch on interconnected computers talking to one another. The computers (on the web) are typically connected by phone lines, digital satellite signals, cables, and other types of data-transfer mechanisms. The computers that make up the web can be connected all the time (24/7), or they can be connected only periodically.

Server : Server The computers that are connected all the time are typically called a 'server'. Server software is created to 'serve' web pages and web sites. Basically, the server computer has a bunch of web sites loaded on it and it just waits for people (via web browsers) to request or ask for a particular page. When the browser requests a page the server sends it out.

Client/server network : How does a webpage reach your computer? Client/server network To access a web site, you first enter its address, called a URL, in the address box of your browser http://www.du.ac.in Your web browser sends the request to the appropriate web server on the Internet. The server sends the web page to your browser

HTML : HTML Hyper Text Markup Language A markup language designed for the creation of web pages and other information viewable in a browser The basic language used to write web pages File extension: .htm, .html

Creating a HTML File : Creating a HTML File Open Notepad Click on File -> Save as… In the File name pull-down box, type in webpage.html Click on Save Type in content for your file Once you finished the content, click on File -> Save

HTML Tags : HTML Tags For example: , , content goes here

Title tag : Title tag Title bar appears here

Background : Background Bgcolor Specifies a background-color for a HTML page. Background Specifies a background-image for a HTML page

Text Elements : Text Elements Text elements in HTML are used for formatting text, like bold, emphasized or italic, and other types of text. Text Elements are of two types. Block Text Elements—These are displayed as blocks of text with line breaks before and after the text. For example, the heading elements,

to

and the paragraph element

. Inline Text Elements—These are displayed within blocks. For example, the element that is used to emphasize text. A browser may display it as bold text, whereas any text reading software may choose to read this word with more emphasis. A block element can contain inline elements, but an inline element cannot contain block elements.

Text : Text Put text on a webpage

Today is my first day at my new job, I’m so excited!

Output: Today is my first day at my new job, I’m so excited! Put text in center of a page Hello Output: Hello Put text on the right of a page

Hello

Output: Hello

Text Styles : Text Styles They are used to create a series of effects in the text like making text bold, italic, big in size etc.

This text is in Bold.
This text is in Italics.
This text is in Bold and italics.

This text is underlined but it may not appear so in your browser.
This text received the style called Strong which is similar to bold.
This text received the Typewriter style.

This text received the big font format which creates big letters.
This text received the small font format which creates small letters.
This is an example of ^superscript text by the SUP command.
This is an example of text where the _subscript effect of the SUB command was used.

To call ATTENTION use the BLINK command.

Font : Font To change text size Hello Output: Hello To change text color Hello Output: Hello Using both Hello Output: Hello Tag attribute

Commonly Used Character Entities : Commonly Used Character Entities

Headings : Headings There are 6 heading commands.

This is Heading 1

This is Heading 2

This is Heading 3

This is Heading 4

This is Heading 5

This is Heading 6

Lists : Lists You can add lists to your HTML documents. There are three kinds of lists that can be added: Unordered Ordered Definition You can put paragraphs, line breaks, images and even other lists inside a list item.

Unordered List : Unordered List Unordered Lists or Bullet Lists—The

element defines an unordered list of items that are represented as
• elements. These lists can be used to represent a collection of small pieces/ bullets of information in a compact layout. Unordered lists can be square bullet lists, disc bullet lists or circle bullet lists. The type of list is given in the type attribute of the
  start tag. For example,
  for square bullet lists.

  Ordered list : Ordered list Ordered Lists—The

  element defines a numbered list of items that are represented as
  1. elements. The item numbers are generated automatically. Ordered lists can be numbered with numbers, uppercase letters, lowercase letters or roman numbers. The type of list is given in the type attribute of the
     start tag. For example.
     for lowercase letters numbered lists.

     List : List Unordered list Code:

     • Coffee
     • Milk
     Output: Coffee Milk Ordered list Code:
     1. Coffee
     2. Milk
     Output: Coffee Milk

     Definition List : Definition List Definition Lists—The

     element defines a list of definitions; the

     element specifies the definition term and the

     element specifies the term’s explanation. For example.

     World Wide Web

     Network of interconnected hypertext documents accessible over the Internet

     Spider’s Web

     A device that a spider builds to trap insects