Download presentation
Presentation is loading. Please wait.
1
HTML Hyper Text Markup Language
3
In Early 1970s VINT CERF & BOB KAHN released a paper In 1980s That Solution was implemented as TCP/IP
4
TCP/IP – Transmission Control Protocol /Internet Protocol..Interconnected network
5
Three world wide web used three new technologies: HTML (Hypertext Markup Language) Write web page HTTP (Hyper text Transfer Protocol) Transmit those pages A web browser client page to receive that data, interpret it, and display the results.
6
APPLICABLE 1. Transfer Protocol --- http:// 2. Server name – www.Aptech.com www.Aptech.com 3. Directory path – html3/ 4. File name – index.html
7
HTML Model OPEN TAG <HTML><HEAD><TITLE><BODY> CLOSE TAG </HTML></HEAD></TITLE></BODY>
8
-- Identifies the document as an HTML document. -- Identifies the document as an HTML document. -- identifies the starting and ending of the header section. -- identifies the starting and ending of the header section. -- this tag place the title bar text in the web browser. -- this tag place the title bar text in the web browser. -- identifies the main portion of the web page. -- identifies the main portion of the web page. [note: most of the commands are used on the body, if you implement any command on head, it should be function (VB or JAVA Script), In some cases we make code in-between head and body is call body language.]
9
One Simple Example <HTML><HEAD> THIS IS MY FIRST WEB PAGE THIS IS MY FIRST WEB PAGE <BODY> WELCOME TO THE INTERNET WORLD </BODY></HEAD></HTML>
10
Heading and paragraph <HTML><HEAD> THIS IS MY FIRST WEB PAGE THIS IS MY FIRST WEB PAGE <BODY> WELCOME TO THE INTERNET WORLD WELCOME TO THE INTERNET WORLD </BODY></HEAD></HTML> [Note: here tag identifies the Heading and tag identifies the Paragraph mark or enter.]
![Heading and paragraph <HTML><HEAD> THIS IS MY FIRST WEB PAGE THIS IS MY FIRST WEB PAGE <BODY> WELCOME TO THE INTERNET WORLD WELCOME TO THE INTERNET WORLD </BODY></HEAD></HTML> [Note: here tag identifies the Heading and tag identifies the Paragraph mark or enter.]](http://images.slideplayer.com./31/9782302/slides/slide_10.jpg "Heading and paragraph <HTML><HEAD> THIS IS MY FIRST WEB PAGE THIS IS MY FIRST WEB PAGE <BODY> WELCOME TO THE INTERNET WORLD WELCOME TO THE INTERNET WORLD </BODY></HEAD></HTML> [Note: here tag identifies the Heading and tag identifies the Paragraph mark or enter.]")
11
Every tag is enclosed in a pair of angle brackets. The opening tag begin with a left angle bracket ( ), closing tags are just like opening tags except that the tag name starts with a slash(/)….. Two type of tags: Empty tag – no need to close tag, Empty tag – no need to close tag, Non-empty tag – has to be closed Non-empty tag – has to be closed
12
Break tag <HTML><HEAD> THIS IS MY FIRST WEB PAGE THIS IS MY FIRST WEB PAGE <BODY> WELCOME TO THE INTERNET WORLD WELCOME TO THE INTERNET WORLD One a web site, the contents is aimed at the public, while an internet aims at the needs of an organization’s own employees. One a web site, the contents is aimed at the public, while an internet aims at the needs of an organization’s own employees.</BODY></HEAD></HTML> [Note: Break tag is used for inserting line break. The text that follows the will be displayed in the next line.
13
Preformatted text tag <HTML> THIS IS MY FIRST WEB PAGE THIS IS MY FIRST WEB PAGE <BODY> The following table is an example for preformatted text <PRE> S.No.Name S.No.Name 1.ALEX 1.ALEX 2. AMAR 2. AMAR 3. ABDUL 3. ABDUL</PRE></BODY></HTML> [note: Preformatted text tag is used to display the text in the browser as it was typed in the HTML document.]
14
BLOCKQUOTE TAG <HTML><HEAD> BLOCKQUOTE BLOCKQUOTE </HEAD><BODY> Since this text is outside the blockquote, it will appear Since this text is outside the blockquote, it will appear from the left corner from the left corner<blockquote><br> Since this text is inside the blockquote it will appear with Since this text is inside the blockquote it will appear with an indent an indent</blockquote></body></html>
15
The most popular text formatting tags :Paragraph :Paragraph :Underline :Underline :Bold :Bold :Italic :Italic :Strikethrough :Strikethrough :Superscript :Superscript :Subscript :Subscript :Strong like Bold :Strong like Bold :Emphasis like Italic :Emphasis like Italic : small : small : big : big : type writer text : type writer text
16
Font set and Alignment text text Left Left Right Right center center Justify Justify [note: “1”=8pt text size, “2”=10pt, “3”=12pt]
![Font set and Alignment text text Left Left Right Right center center Justify Justify [note: 1 =8pt text size, 2 =10pt, 3 =12pt]](http://images.slideplayer.com./31/9782302/slides/slide_16.jpg "Font set and Alignment text text Left Left Right Right center center Justify Justify [note: 1 =8pt text size, 2 =10pt, 3 =12pt]")
17
Some color in Hexadecimal value Red #FF0000 Black #000000 Dark Blue #000080Green #00FF00 Gray #808080 Yellow # FFFF0 Blue #0000FF Bark Red #800000 Magenta #FF00FFWhite #FFFFFF Dark Green #008000Cyan #00FFFF
18
Bulleting <HTML><HEAD> Bulleting Bulleting </HEAD><BODY> Unordered list and list heading Unordered list and list heading SOME ASIAN COUNTRIES: SOME ASIAN COUNTRIES: INDIA INDIA BANGLADESH BANGLADESH SINGAPORE SINGAPORE </BODY></HTML>
19
NUMBERING <HTML><HEAD> NUMBERING NUMBERING </HEAD><BODY> Ordered list and list heading Ordered list and list heading SOME ASIAN COUNTRIES: SOME ASIAN COUNTRIES: INDIA INDIA BANGLADESH BANGLADESH SINGAPORE SINGAPORE </BODY></HTML>
20
Adding Images to your web [SRC: This is a mandatory attribute that specifies the URL of the image file. ALT: If the browser does not open the image file, then this attribute allows the user to display an alternative text for the user’s convenience.]
21
Horizontal Ruler tag <HR>
22
HYPERLINK ON TEXT MAN MAN <HTML><HEAD> TEXT HYPERLINK TEXT HYPERLINK <BODY> HYPRELINK USING A COMPLETE URL HYPRELINK USING A COMPLETE URL MAN MAN </BODY></HEAD></HTML>
23
HYPERLINK ON PICTURE <HTML><HEAD> TEXT HYPERLINK TEXT HYPERLINK <BODY> HYPRELINK USING A COMPLETE URL. HYPRELINK USING A COMPLETE URL. </HEAD></HTML>
24
FORM To create a form, the tag is used. It is a non- empty tag and has two attribute associated with it. METHOD : Can be specified as get (default) or POST (Preferred)---- GET – Attaches the input to the action URL. POST – sends the input in a data body separately. ACTION : Specifies the path of the action script used to process the form. [Note: The tag is used to specifies which input fields are a available in the form. tag is an empty tag with three attributes.]
25
TYPE : This is set to TEXT, indicating a single text input fields. There are other type like RADIO for radio Button, CHECKBOX for checkbox, and BUTTON for button etc. NAME : This is a variable name for the text field that author must specify. SIZE : This is the width the TEXT field.
26
TEXT : Specifies a text-empty field. SIZE : Specifies the width of the text filed in characters. MAXLENGTH : Specifies the maximum number of characters to be accepted. CHECKBOX : Specifies the element checked RADIO : Specifies a single toggle ON/OFF NAME : Specifies the name of the field. VALUE : Indicates the user entered value. SUBMIT : Uploads the form to the server. RESET : Resets form fields to defaults
27
: tag is used for created lists and formatting the text fields. There are four attributes associated with the tag. : tag is used for created lists and formatting the text fields. There are four attributes associated with the tag. MULTIPLE : Indicate the number of elements in list that can be displayed SIZE : Determines the number if items to be displayed in a list OPTION : Defines each value within tag NAME : Indicates the name of the field.
28
tag is used for make text empty field with multiple rows. There are three attributes associated with the tag. tag is used for make text empty field with multiple rows. There are three attributes associated with the tag. ROWS : Specifies the height of the field in character COLS : Specifies the width of the text field in character NAME : Specifies the name of the field.
29
<HTML><HEAD> FORM WITH ALL TAGS FORM WITH ALL TAGS <BODY> ADMISSION FORM ADMISSION FORM FIRST NAME FIRST NAME <INPUT TYPE =TEXT NAME=FNAME SIZE=”20”> NAME=FNAME SIZE=”20”> LAST NAME LAST NAME <INPUT TYPE =TEXT NAME=LNAME SIZE=”20”> NAME=LNAME SIZE=”20”> ADDRESS ADDRESS <INPUT TYPE =TEXT NAME=ADD SIZE=”40”> NAME=ADD SIZE=”40”> SEX: MALE SEX: MALE <INPUT TYPE =RADIO NAME=SEX VALUE=MALE> NAME=SEX VALUE=MALE> FEMALE <INPUT TYPE =RADIO NAME=SEX FEMALE <INPUT TYPE =RADIO NAME=SEX VALUE=FEMALE> VALUE=FEMALE> INTEREST (SELECT MORE THAN ONE IF INTEREST (SELECT MORE THAN ONE IF APPLICABLE) APPLICABLE)
30
MUSIC MUSIC SPORTS SPORTS SCIENCE SCIENCE OTHERS OTHERS </BLOCKQUOTE></BLOCKQUOTE> DESIGNATION DESIGNATION EXECUTIVE EXECUTIVE MANAGER MANAGER DIRECTOR DIRECTOR PROGRAMMER PROGRAMMER CO-ORDINATOR CO-ORDINATOR
31
SELECT SOFTWARE WHICH YOU ARE USING SELECT SOFTWARE WHICH YOU ARE USING ( NOTE: USE SHIFT OR CTRL FOR SELECTING MORE THAN COHICE) ( NOTE: USE SHIFT OR CTRL FOR SELECTING MORE THAN COHICE) <BLOCKQUOTE><BLOCKQUOTE> WINDOWS NT WINDOWS NT WINDOWS 98/2000/XP WINDOWS 98/2000/XP WQL SERVER WQL SERVER VISUAL BASIC VISUAL BASIC VISUAL C++ VISUAL C++ FORNT PAGE FORNT PAGE OFFICE 2000/XP OFFICE 2000/XP </SELECT>
32
</BLOCKQUOTE></BLOCKQUOTE><P> IF YES, FEEL FREE TO USE THIS SPACE TO DESCRIBE WHICH CONCERN(S) YOU WOULD LIKE TO TALK ABOUT. IF YES, FEEL FREE TO USE THIS SPACE TO DESCRIBE WHICH CONCERN(S) YOU WOULD LIKE TO TALK ABOUT. <P> </BODY></HTML>
Similar presentations
