1 / 32

HTML

HTML. Hyper Text Markup Language. In Early 1970s VINT CERF & BOB KAHN released a paper In 1980s That Solution was implemented as TCP/IP. TCP/IP – Transmission Control Protocol /Internet Protocol ..Interconnected network. Three world wide web used three new technologies:.

nita
Télécharger la présentation

HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML Hyper Text Markup Language

  2. In Early 1970sVINT CERF & BOB KAHN released a paperIn 1980s That Solution was implemented as TCP/IP

  3. TCP/IP – Transmission Control Protocol /Internet Protocol..Interconnected network

  4. 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.

  5. APPLICABLE • Transfer Protocol --- http:// • Server name – www.Aptech.com • Directory path – html3/ • File name – index.html

  6. HTML Model OPEN TAG <HTML> <HEAD> <TITLE> <BODY> CLOSE TAG </HTML> </HEAD> </TITLE> </BODY>

  7. <HTML> -- Identifies the document as an HTML document. <HEAD> -- identifies the starting and ending of the header section. <TITLE> -- this tag place the title bar text in the web browser. <BODY> -- 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.]

  8. One Simple Example <HTML> <HEAD> <TITLE> THIS IS MY FIRST WEB PAGE </TITLE> <BODY> WELCOME TO THE INTERNET WORLD </BODY> </HEAD> </HTML>

  9. Heading and paragraph <HTML> <HEAD> <TITLE> THIS IS MY FIRST WEB PAGE </TITLE> <BODY> <H1>WELCOME TO THE INTERNET WORLD </H1><P> <H2>WELCOME TO THE INTERNET WORLD </H2><P> <H3>WELCOME TO THE INTERNET WORLD </H3><P> <H4>WELCOME TO THE INTERNET WORLD </H4><P> <H5>WELCOME TO THE INTERNET WORLD </H5><P> <H6>WELCOME TO THE INTERNET WORLD </H6> </BODY> </HEAD> </HTML> [Note: here <H> tag identifies the Heading and <P> tag identifies the Paragraph mark or enter.]

  10. Every tag is enclosed in a pair of angle brackets. The opening tag begin with a left angle bracket (<) followed by the tag name and then the right 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 <P>, <BR> • Non-empty tag – has to be closed <HTML></HTML>

  11. Break tag <HTML> <HEAD> <TITLE> THIS IS MY FIRST WEB PAGE </TITLE> <BODY> WELCOME TO THE INTERNET WORLD<P> One a web site, the contents is aimed at the public,<BR> while an internet aims at the needs of an organization’s own employees. </BODY> </HEAD> </HTML> [Note: <BR> Break tag is used for inserting line break. The text that follows the <BR> will be displayed in the next line.

  12. Preformatted text tag <HTML> <TITLE> THIS IS MY FIRST WEB PAGE </TITLE> <BODY> The following table is an example for preformatted text <PRE> S.No. Name 1. ALEX 2. AMAR 3. ABDUL </PRE> </BODY> </HTML> [note: <PRE> Preformatted text tag is used to display the text in the browser as it was typed in the HTML document.]

  13. BLOCKQUOTE TAG <HTML> <HEAD> <TITLE> BLOCKQUOTE</TITLE> </HEAD> <BODY> Since this text is outside the blockquote, it will appear from the left corner <blockquote> <br> Since this text is inside the blockquote it will appear with an indent </blockquote> </body> </html>

  14. The most popular text formatting tags <P> </P> : Paragraph <U> </U> : Underline <B> </B> : Bold <I> </I> : Italic <Strike> </Strike> : Strikethrough <sup> </sup> : Superscript <sub> </sub> : Subscript <strong> </strong> : Strong like Bold <em> </em> : Emphasis like Italic <small> </small> : small <big> </big> : big <samp> </samp> : type writer text

  15. Font set and Alignment <font size=“1” color=“Black” Face=“Arial” align=“right”> text </font> Left  <P Align=“left”> Right  <P Align=“right”> center  <P Align=“center”> Justify  <P Align=“Justify”> [note: “1”=8pt text size, “2”=10pt, “3”=12pt]

  16. Some color in Hexadecimal value Red #FF0000 Black  #000000 Dark Blue  #000080 Green  #00FF00 Gray  #808080 Yellow  # FFFF0 Blue  #0000FF Bark Red  #800000 Magenta  #FF00FF White  #FFFFFF Dark Green  #008000 Cyan  #00FFFF

  17. Bulleting <HTML> <HEAD> <TITLE> Bulleting</TITLE> </HEAD> <BODY> Unordered list and list heading <p> <UL> <LH> SOME ASIAN COUNTRIES: <BR> <LI> INDIA <LI> BANGLADESH <LI> SINGAPORE </UL> </BODY> </HTML>

  18. NUMBERING <HTML> <HEAD> <TITLE> NUMBERING</TITLE> </HEAD> <BODY> Ordered list and list heading <p> <OL> <LH> SOME ASIAN COUNTRIES: <BR> <LI> INDIA <LI> BANGLADESH <LI> SINGAPORE </OL> </BODY> </HTML>

  19. Adding Images to your web <IMG SRC=“MAN.GIF” ALT=“MY PICTURE” HEIGHT=100 WIDTH=50> [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.]

  20. Horizontal Ruler tag <HR> <HR WIDTH=“7%” SIZE=5 ALIGN=“LEFT”>

  21. HYPERLINK ON TEXT <A HREF=“C:\.....\MAN.HTML”>MAN</A> <HTML> <HEAD> <TITLE> TEXT HYPERLINK</TITLE> <BODY> <H2 ALIGN=“CENTER”> HYPRELINK USING A COMPLETE URL </H2> <H4 ALIGN=“CENTER”> <A HREF=“C:\.....\MAN.HTML”>MAN</A></H4> </BODY> </HEAD> </HTML>

  22. HYPERLINK ON PICTURE <A HREF=“C:\.....\MAN.HTML”><IMG SCR=“C:\.......\BULLET.JPG”></A> <HTML> <HEAD> <TITLE> TEXT HYPERLINK</TITLE> <BODY> <H2 ALIGN=“CENTER> HYPRELINK USING A COMPLETE URL .</H2> <H4 ALIGN=“CENTER”> <A HREF=“C:\.....\MAN.HTML”><IMG SCR=“C:\.......\BULLET.JPG”></BODY> </HEAD> </HTML>

  23. FORM To create a form, the <form> 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 <INPUT> tag is used to specifies which input fields are a available in the form. <INPUT> tag is an empty tag with three attributes.]

  24. 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.

  25. 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

  26. <SELECT> : tag is used for created lists and formatting the text fields. There are four attributes associated with the <SELECT> 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 <SELECT> tag NAME : Indicates the name of the field.

  27. <TEXTAREA> tag is used for make text empty field with multiple rows. There are three attributes associated with the <TEXTAREA> 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.

  28. <HTML> <HEAD> <TITLE> FORM WITH ALL TAGS </TITLE> <BODY> <H3 ALIGN=CENTER> ADMISSION FORM </H3> <FORM NAME=”TAGS” METHOD=POST> <B> FIRST NAME </B> <INPUT TYPE =TEXT NAME=FNAME SIZE=”20”><P> <B> LAST NAME </B> <INPUT TYPE =TEXT NAME=LNAME SIZE=”20”><P> <B> ADDRESS </B> <INPUT TYPE =TEXT NAME=ADD SIZE=”40”><P> <B> SEX:</B> MALE <INPUT TYPE =RADIO NAME=SEX VALUE=MALE> FEMALE <INPUT TYPE =RADIO NAME=SEX VALUE=FEMALE><P> <B> INTEREST (SELECT MORE THAN ONE IF APPLICABLE) </B><BR>

  29. <BLOCKQUOTE><BLOCKQUOTE> <INPUT TYPE=CHECKBOX NAME=MUSIC> MUSIC <BR> <INPUT TYPE=CHECKBOX NAME=SPORTS> SPORTS <BR> <INPUT TYPE=CHECKBOX NAME=SCIENCE> SCIENCE <BR> <INPUT TYPE=CHECKBOX NAME=OTHERS> OTHERS <BR> </BLOCKQUOTE></BLOCKQUOTE> <B> DESIGNATION</B> <SELECT NAME=SESIGNATION> <OPTION> EXECUTIVE <OPTION> MANAGER <OPTION> DIRECTOR <OPTION> PROGRAMMER <OPTION> CO-ORDINATOR </SELECT><P>

  30. <B> SELECT SOFTWARE WHICH YOU ARE USING </B> <BR> (<B> NOTE: </B> USE SHIFT OR CTRL FOR SELECTING MORE THAN COHICE)<P> <BLOCKQUOTE><BLOCKQUOTE> <SELECT MULTIPLE NAME =”SOFTWARE” SIZE=5> <OPTION> WINDOWS NT <OPTION> WINDOWS 98/2000/XP <OPTION> WQL SERVER <OPTION> VISUAL BASIC <OPTION> VISUAL C++ <OPTION> FORNT PAGE <OPTION> OFFICE 2000/XP <OPTION> </SELECT>

  31. </BLOCKQUOTE></BLOCKQUOTE> <P> IF YES, FEEL FREE TO USE THIS SPACE TO DESCRIBE WHICH CONCERN(S) YOU WOULD LIKE TO TALK ABOUT.<BR> <TEXTAREA COLS=50 NAME=CONCERNSLIST ROWS=4 MAXLENGTH=""></TEXTAREA> <P> <INPUT TYPE=BUTTON VALUE=SUBMIT> <INPUT TYPE=RESET VALUE=CLEAR_FORM > </BODY> </HTML>

More Related