Presentation is loading. Please wait.

Presentation is loading. Please wait.

HTML stands for 'hyper text mark-up language' and is a simple language that anyone can learn and is used for making web pages. What is HTML? learn html.

Similar presentations


Presentation on theme: "HTML stands for 'hyper text mark-up language' and is a simple language that anyone can learn and is used for making web pages. What is HTML? learn html."— Presentation transcript:

1 HTML stands for 'hyper text mark-up language' and is a simple language that anyone can learn and is used for making web pages. What is HTML? learn html What is HTML? learn html What is HTML?

2 What tools are needed to make a webpage? All that is needed is 'notepad' and a second browser, notepad is a simple text editor in windows, click start on your taskbar then programs and then goto accessories, finally click notepad. What does html look like? Most html tags work in pairs The first tag tells the browser that it is reading a html document. The tag with the / in it tells the browser that the html has ended. Take a look below The first tag tells the browser that it is reading the head of a html document. The tag with the / in it tells the browser that the head part has ended. One more example The first tag tells the browser that it is reading the title of a html document. The tag with the / in it tells the browser that the title has ended.

3 The minimal webpage:- my first web page This is my very first webpage, aint i clever? This is my very first webpage, aint i clever? Output:-

4 What is Web Page Web page is a page which is displayed on the internet. Web pages are created by using HTML syntax. In web pages we can insert the picture,table, graphics by using different tags of html language.

5 HTML TAGS  Html tags are standard set of codes that are typed in between greater than and less than signs on the keyboard. Like There are basically two types of HTML tags  Padded Tags  Unpadded Tags

6  Padded Tags:- Padded tags are those tags which are required to be closed at the end. The Padded tag is closed with forward hash (/) before the tag name. ……..

7  Unpadded tags:- unpadded tags is just the opposite of Padded Tags, as they need not be closed at the end.

8 Layout of Web Page Title Headin g Bod y Footer

9 Basic Tags:- ….…….. ………… ……….. …………

10 BASIC TAGS TagsDescription ……… Indicates the beginning of HTML document …………. Indicates title for the web page. …………. Indicates the beginning of document header. ……….. Indicates the beginning of HTML text.

11 My page Punsoft life skills academy This is my first web page. Title Head Body

12 Formatting Tags are used to design, styles and colors to the text. FormatTagsDescription Paragraph Indicates paragraph break Indicates line break …. Indicates Preformatted text ….. Indicates block of text, indented Indicates Block of text, indented It indicate the alignment of text or picture in center of a page.

13 This is heading 1 The heading above is aligned to the center of this page. The heading above is aligned to the center of this page. The heading above is aligned to the center of this page. Output:- This is heading 1 The heading above is aligned to the center of this page. The heading above is aligned to the center of this page. The heading above is aligned to the center of this page. Note:- to make your text in center of page you can also use the option (tag) simply.

14 Use of horizontal line in HTML The hr tag defines a horizontal rule: This is a paragraph Output: The hr tag defines a horizontal rule: This is a paragraph

15 FormatTagsDescription Character …. Indicates italics ….. Underlines the text …… Indicates bold text …… Indicates “typewriter” font …… Emphasizes the text (usually italics) …. Indicates information about the author who created the web page in a unique font. ……. Indicates typical Bold Font ……… Highlights Citation ……. Used to enclose program codes Title=“……..”It is used as abbreviation of full text.

16 This is a paragraph. we are using this option to display the result of this option on the web page Output:- This is a paragraph. we are using this option to display the result of this option on the web page

17 This text is bold This text is strong This text is big This text is emphasized This text is italic This text is small This is subscript and superscript

18 Output:-Text formatting This text is bold This text is strong This text is big This text is emphasized This text is italic This text is small This is subscript and superscript

19 Pre and p options This is preformatted text. It preserves both spaces and line breaks. The pre tag is good for displaying computer code: for i = 1 to 10 print i next i

20 Output This is preformatted text. It preserves both spaces and line breaks. The pre tag is good for displaying computer code: for i = 1 to 10 print I next i

21 Abbreviation tags: UN WWW The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or abbreviation.

22 Output of abbreviation tag UN WWW The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or abbreviation.

23 If your browser supports bi-directional override (bdo), the next line will be written from the right to the left (rtl): Here is some Hebrew text

24 Output  If your browser supports bi-directional override (bdo), the next line will be written from the right to the left (rtl):  Txet werbeH emos si ereH Note:- tag show the text in opposite direction like mirror effect.

25 Use of Some other tags (coding) Computer code Keyboard input Teletype text Sample text Computer variable Note: These tags are often used to display computer/programming code.

26 Output:- Computer code Keyboard input Teletype text Sample text Computer variable Note: These tags are often used to display computer/programming code.

27   UN   WWW  The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or abbreviation. 

28 Header … First-level heading (big size) ….. Second-level heading …. Third -level of heading …. Fourth-level of heading ….. Fifth-level of heading …… Sixth-level of heading …… Smallest level of heading

29 This is heading 1 This is heading 2 This is heading 3 This is heading 4 This is heading 5 This is heading 6 Output:- This is heading 1 This is heading 2 This is heading 3 This is heading 4 This is heading 5 This is heading 6 Use of heading tags:

30 TagAttributeFunction Indicates comment tag in Html. The browser does not interpret it. Bgcolor=“……”It is used to give the background color of the page Background=“ …” It is used to display the image on the page as a background These tags are used in body tag. …... It is used to show text in subscript form ….. It is used to show text in superscript form

31 Use of background tags/attributes Look: Colored Background! Output:- Look: Colored Background! Note:- This option is also used as both have same effects.

32 Output:- This is a regular paragraph This is a regular paragraph

33 Color codes in html CC0000FF CC0033FF CC0066FF CC0099FF 00CC0000CC3300CC6600CC9900CCCC00CCFF 00FF0000FF3300FF6600FF9900FFCC00FFFF CC3300FF CC3333FF CC3366FF CC3399FF 33CC0033CC3333CC6633CC9933CCCC33CCFF 33FF0033FF3333FF6633FF9933FFCC33FFFF CC6600FF CC6633FF CC6666FF CC6699FF 66CC0066CC3366CC6666CC9966CCCC66CCFF 66FF0066FF3366FF6666FF9966FFCC66FFFF CC9900FF CC9933FF CC9966FF CC9999FF 99CC0099CC3399CC6699CC9999CCCC99CCFF 99FF0099FF3399FF6699FF9999FFCC99FFFF CC0000CC0033CC0066CC0099CC00CCCC00FF CC3300CC3333CC3366CC3399CC33CCCC33FF CC6600CC6633CC6666CC6699CC66CCCC66FF CC9900CC9933CC9966CC9999CC99CCCC99FF CCCC00CCCC33CCCC66CCCC99CCCCCCCCCCFF CCFF00CCFF33CCFF66CCFF99CCFFCCCCFFFF FF0000FF0033FF0066FF0099FF00CCFF00FF FF3300FF3333FF3366FF3399FF33CCFF33FF FF6600FF6633FF6666FF6699FF66CCFF66FF FF9900FF9933FF9966FF9999FF99CCFF99FF FFCC00FFCC33FFCC66FFCC99FFCCCCFFCCFF FFFF00FFFF33FFFF66FFFF99FFFFCCFFFFFF

34 Lists in HTML  List mean to make/arrange the information in order. Listing of item is possible in html. List is divided into two parts. Order list: Unordered list: items to be listed are typed after tag which mean. It is a unpadded tag it mean there is no need to close it, it is op

35 Ordered list:- The ordered list consists of alphabetical order and numeric order. The ordered list begins with tag and is a padded tag hence the list ends with a tag. This tag must be closed at the end of list. Example:- Names of cities Chandigarh Ropar Patiala Output:- Names of cities 1.Chandigarh 2.Ropar 3.Patiala Note:- by default numbers are shown in ordered list.

36 Example and other features of ordered list: Alphabets in ordered list: For uppercase list: Chandigarh Ropar Patiala Output:- A. Chandigarh B. Ropar C. Patiala Alphabets in ordered list: For uppercase list: Chandigarh Ropar Patiala Output:- a) Chandigarh b) Ropar c) Patiala

37 Other options of ordered list: Roman Characters as ordered list :- Uppercase: Chandigarh Ropar Patiala Output:- I. Chandigarh II. Ropar III. Patiala Roman Characters as ordered list :- Lower case: Chandigarh Ropar Patiala Output:- i. Chandigarh ii. Ropar iii. Patiala

38 To start the list from particular number- in ordered list only Chandigarh Ropar Ludhiana Patiala Output:- 7.Chandigarh 8.Ropar 9.Ludhiana 10.Patiala Chandigarh Ropar Ludhiana Patiala Output:- e.Chandigarh f.Ropar g.Ludhiana h.Patiala

39 Unordered list:- The unordered list consists of bullets. The unordered list begins with tag and is a padded tag hence the list ends with a. Tag is sub tag or attribute of this list. Example:- default bullets as unordered list. Chandigarh Ropar> Patiala Ludhiana Output :- Chandigarh Ropar Patiala Ludhiana

40 To change the shape of the bullets from default to square. Chandigarh Ropar Patiala Ludhiana Output:-  Chandigarh  Ropar  Patiala  Ludhiana Chandigarh Ropar Patiala Ludhiana Output:- o Chandigarh o Ropar o Patiala o Ludhiana

41 What is Nested list:- List within a list is known as a nested list. It can be extended up to several levels. The most common example of nested list is index or contents of any book.

42 Images in HTML Images can be inserted on the wed page using HTML tags. There are different types of images or graphics file formats like gif, jpeg(jpg), Wmf, etc. that can be easily inserted on a web page through HTML tags. HTML tag associated with inserting images and its attributes with their functions are given in the following table:

43 TagAttributeFunction

44 Inserting Images This is a picture of roses

45 This is a picture of Roses

46 Links in HTML Links:-link is a connection of one test/picture with other text/picture. In Html links are necessary to link different web pages in a web site. It is also necessary for linking from one part of the document to another part in the same document. Types of Links:-  Internal links  External links

47 Tags for hyperlinks TagAttributesFunction …… The anchor tag when used with the href attribute creates a link to another document or anchor Href=“......”The address of the document or anchor point to link to. name-=“…”The name for this anchor point in the document Id=“…..”The id tad is exactly like the name tag.(include both name and id for maximum past and future compatibility.)

48 Internal Link Internal Links are those links that are inserted within a single current document. It mean it is a link within a document. It is used when Document is too large and it needs link from Top to Bottom or Bottom to Top.

49 Syntax 1. link text Type the text as you required 2. link text Note:- Both the text are required to create internal link.

50 Example: Bottom This is a document which shows the link with in a page. All the text is used to show link of top text with bottom text. Top Note= “#” symbol is used to indicate internal link.

51 output Bottom This is a document which shows the link with in a page. All the text is used to show link of top text with bottom text. Top Blue color is always shown as link Note:- when you click on bottom then cursor will be shifted to bottom of the page or vice versa.

52 External Link External links are links to other web Pages or sites. when we have some important data or information in any other document then this link is used to connected two different document with each other.

53  For example:- click here to go to xyz file This example “

54 Link with Picture  In this example a hyperlink is created to an image file and the image file is replaced with inflated picture of the same image.  Small picture is shown as link. when you click on Link,it will displayed large size of picture.

55 Syntax:- Here if you click on small picture of ret then you can see original size of ret picture Here is you click on small picture of roses then you can see original size of ret picture

56 Table in HTML A table is an orderly arrangement of text and/or graphics into vertical column and horizontal rows. Tables can be created in html using the tag. Table can contain different types of data for example it can include links, paragraphs, preformatted text, images, another table, and so on.

57 Table tags TagAttributeFunction …..... …. Indicates the start and the end of the table. Align=“…….” Bgcolor=“……”Background color for the table. Values are assigned is in pixels or hexadecimal number. Background=“….”Background refers to background image. Width=“…….”Value assigned in percent.% Border=“……”Value assigned in numbers. (2,3,4) Bordercolor=“….”Value assigned in pixels or hexadecimal number. Border colorlight=“….” Value assigned in pixels or hexadecimal number. Border colordark=“….” Value assigned in pixels or hexadecimal number.

58 TagAttributeFunction CellpaddingIndicates space between border and contents of cell. CellspacingIndicates spacing between cells. … Indicates heading for the table. Indicates table rows. Align=“……’Row contents to be aligned left, right, center. Background=“…….”Background refers to background image. Bgcolor=“…..”Background color for the row. Values are assigned is in pixels or hexadecimal number. …. Indicates heading for the columns. …. Indicates individuals table elements or cells. Align=“……..”Cell contents to be aligned left, right, center.

59 TagAttributeFunction Background=“……..” Background refers to background image. Bgcolor=“……”Background color for the cell. Values are assigned is in pixels or hexadecimal number. Valign=“…… “Values assigned for vertical alignment of data in the cell. (top, Center, Bottom, Baseline) Colspan=“……”Merging cells in different columns. Rowspan=“…….”Merging cells in different columns. Notes:- This table provides the different tags associated with tables in html. Tags are the main functions but the attributes are the

60 Html tags Table

61 Output of table tags Table

62 Rows and column span Row span in table

63 Row span in table

64 Forms in HTML  Forms are basically used for registration detail that the user may have to enter in the form. TagAttributefunction.. Indicates the beginning and end of a form in HTML Action=file/URLSpecifies the location where form data is passed. Method=get/p ost Specifies the method by which the data is sent to the server. Name=“……’Name assigned to the form which is not displayed on the browser.

65 Forms In html the form is used as a special feature by which the user can fill in certain information in a web page and is send to the server. In a web page the input is collected with the help of the form tag in html. The information collected can be stored in form of a file or a database on the web server. Thus using forms one can create an effective interaction between the client and the server.

66 Insert text box in form  Text box:- the text box is used to collect small amount of data in a single line/ text box. Data such as Name, address, Contact number, etc can be collected using this form field. Rajindra education trust. Name:-This is a text box.

67 Type your first name: Type your last name: If you click the "Submit" button, you will send your input to a new page called html_form_action.asp. Output:- Type your first name: Type your last name: If you click the "Submit" button, you will send your input to a new page called html_form_action.asp.

68 Health information: Height Weight If there is no border around the input form, your browser is too old. Output:- Health information: Height Weight If there is no border around the input form, your browser is too old.

69 Important tags of form TagAttributeFunction It is a basis for data entry Type=“text”Type Specifies the form field in which data is to be entered Size=“……”Size of the text field (Value assigned in numbers: 0,1,2,3…) Name=“…..”Name of the control, which is not displayed on the browser. It is used to collect data on the server. values assigned can be alpha numeric or alphabets but not numeric. Maxlength=“ ….” Determines maximum number of characters to be entered in the field. (value assigned in numbers 0,1,2,3,..)

70 Text area The text area is used to collect information in more than one single line of text, in two or more lines. This form field scrolls in order to type the entire text to fit in the form field. It is used to collect detail on a particular topic which the visitor can enter as simple as typing out in a sentence of varying length.

71 Text area tags. TagAttributeFunction … …… It is the basis for data entry. Name=“……… ” Name of the control, which is not displayed on the browser. It is used to collect data on the server. Cols=“……….”Determine the size of the text area in numbers. Rows=“………”Determine the size of the text area in numbers.

72  This example cannot be edited because our editor uses a textarea for input, and your browser does not allow a textarea inside a textarea. This example cannot be edited because our editor uses a textarea for input, and your browser does not allow a textarea inside a textarea. Note:- When you see the slide view of this option then you can write anything in this textarea but not now.

73 Check box: The check box is used in order to specify preferences on the form page. The visitor simply clicks on the check box to select the item listed next to it in the form. The database is collected on the bases of whether the item having a check box is selected or not.

74 Check box tags TagAttributeFunction It is the basis for data entry Type=“checkbo x” Type specifies the form field in which data is to be entered. (create a checkbox) Name =“……….” Name of the control, which is not displayed on the browser. It is used to collect data on the server. Value=“……….”Determines the Boolean value of the form field, which is sent to the server

75 Checkboxes:  Checkboxes are used when you want the user to select one or more options of a limited number of choices. I have a bike: I have a car: I have an airplane: Output How it looks in a browser: I have a bike: I have a car: I have an airplane:

76 Radio buttons  The radio is used in case when you want that the visitor of the site can select just one option from the list or group. Like option –male or female. This button are always shown in circle form. FemaleGende r Male

77 Radio buttons: TagAttributeFunction It is the basis for data entry. Type=“radio”Type specifies the form field in which data is to be entered. (creates a radio button) Name=“……. ” Name of the control, which is not displayed on the browser. It is used to collect data on the server. Value=“……. ” Determine the Boolean value of the form field, which is sent to the server. Value assigned can be yes/no CheckedIt is used in case of multiple radio buttons only. If none of the buttons are clicked then by default the one with the checked tag will be selected.

78 Radio Buttons Radio Buttons are used when you want the user to select one of a limited number of choices. Male Female Example:- How it looks in a browser: Male Female

79

80 Select tag  This option is used to give drop down menu list with a list of choices. This field is a similar to using a group of radio buttons, but takes less space on your form. You can configure a drop-down menu to allow one or multiple selections.

81 Select tag TagAttributesfunction … … Create a drop down menu list. Name=“…….”Name of the control, which is not displayed on the browser. It is used to collect data on the server. Size=“………”Specifies the number of items visible at a time Multiple=“………”Allows multiple items to be selected at a time. Defines the list item as option in the select form field. Value=“…………. ” Value assigned to each item as option in the select form field. selectedSpecifies the default item selected among list of items.

82 Volvo Saab Fiat Audi Output:-

83   Volvo  Saab  Fiat  Audi  Output:- Note: Here flat option is selected as a default value. Highlighted in Red color for knowledge.

84 Button:  Buttons are provided to the site visitors to click on it so as to follow a certain command assigned to it. In form we use two sets of buttons i.e. Submit and Reset.  The submit button is used in case the visitor has finished entering the form and wants to submit the data to the server that he has entered.  The reset button is used to reset the form field so as to enter the next record.

85 Button tags: Tag attributefunction It is the basis for the data entry. Type=“button”Type specifies the form field through which data is to be submitted.(create a button with the fault on it as “button”. Type=“submit”“type specifies the form field through which data is to be submitted.(create a submit button with the default text on the button as “submit query” Type=“reset”Type speciifes the form field through which data is to be submitted. (creates a reset button with the default text on the button as “reset”. Name=“…..” Value=“……Is the text that will appear on the button in the browser.

86  When the user clicks on the "Submit" button, the content of the form is sent to the server. The form's action attribute defines the name of the file to send the content to. The file defined in the action attribute usually does something with the received input. Username: How it looks in a browser: Username:

87 Password:  Password s used in case any security aspect is to be included on the web page. The password field will displayed the data entered in form of asterisks (stars), as the password is not to be visible on the screen.  Hence the text typed in password is masked in star asterisks form in HTML.

88 Password tags TagAttributeFunction It is the basis for data entry. Type=“passwor d” Type specifies the form field in which data is to be entered. (creates a text box for password with default size.) Name=“…….”Name of the control, which is not displayed on the browser. It is used to collect data on the server. Size=“……..”Size of the text field (value assigned in numbers: 0,1,2,3,…) Maxlength=“… …) Determines maximum number of characters to be entered in the field.(value assigned in numbers: 0,1,2,….)

89 Frames in HTML Frame is basically division of the current browser window into rectangular sections that can open multiple web pages in different section after the main web page is opened in the browser. Frames divide the web page into different section like in rows and columns.

90 Frame tags TagAttributesFunction … ….. It indicates the start and end tags to create frames. Cols=“……”Divides the document window into columns. Value are assigned in percentage (%age) Rows=“……..”Divides the document window into rows. Value are assigned in percentage. (%age) Specifies the file to be displayed in each frame. Src=“……..”The location of the file to be opened in the frame. Name=“………”Specifies the name of the frame.

91 TagAttributesfunction NoresizeDenotes that the size of the frame is fixed and cannot be altered. Scrolling=“…….”Specifies scroll bars. Values assigned can be yes, no or auto. Border=“…….”Specifies border for the frame. (value assigned in numbers: 0,1,2,3,4…..) ……. /Noframes> Specifies that non-Netscape browser displays html codes within these tags. Note:- to insert frames do not use the head and body tags, as you need to divide the entire document window into frames that open different html files.

92 Frame tag (vertical frames) 

93 Horizontal frames

94   Your browser does not handle frames! 

95 Rows and column in frame. 

96 Some older browsers don't support iframes. If they don't, the iframe will not be visible.

97  Some older browsers don't support iframes.  If they don't, the iframe will not be visible.


Download ppt "HTML stands for 'hyper text mark-up language' and is a simple language that anyone can learn and is used for making web pages. What is HTML? learn html."

Similar presentations


Ads by Google