Html Presentation Of Web Page Making

What is an HTML File? HTML stands for H yper T ext M arkup L anguage An HTML file is a text file containing small markup tags The markup tags tell the Web browser how to display the page An HTML file must have an htm or html file extension An HTML file can be created using a simple text editor

HTML Tags HTML tags are used to mark-up HTML elements HTML tags are surrounded by the two characters < and > The surrounding characters are called angle brackets HTML tags normally come in pairs like <b> and </b> The first tag in a pair is the start tag, the second tag is the end tag The text between the start and end tags is the element content HTML tags are not case sensitive, <b> means the same as <B>

Basic HTML Tags Defines a comment <!--> Defines a horizontal rule <hr> Inserts a single line break < br > Defines a paragraph <p> Defines header 1 to header 6 <h1> to <h6> Defines the document's body <body> Defines an HTML document <html> Description Tag

<html> <head> <title>Title of page</title> </head> <body> This is my first homepage. <b>This text is bold</b> </body> </html> Tag

Tag Attributes Tags can have attributes . Attributes can provide additional information about the HTML elements on your page.This tag defines the body element of your HTML page: <body>. With an added bgcolor attribute, you can tell the browser that the background color of your page should be red, like this: <body bgcolor="red">. This tag defines an HTML table: <table>. With an added border attribute, you can tell the browser that the table should have no borders: <table border="0"> Attributes always come in name/value pairs like this: name="value". Attributes are always added to the start tag of an HTML element.

Headings Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines the smallest heading. <h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3> <h4>This is a heading</h4> <h5>This is a heading</h5> <h6>This is a heading</h6> HTML automatically adds an extra blank line before and after a heading.

Paragraphs Paragraphs are defined with the <p> tag. <p>This is a paragraph</p> <p>This is another paragraph</p> HTML automatically adds an extra blank line before and after a paragraph.

Line Breaks The <br> tag is used when you want to end a line, but don't want to start a new paragraph. The <br> tag forces a line break wherever you place it. <p>This <br> is a para<br>graph with line breaks</p> The <br> tag is an empty tag. It has no closing tag.

Comments in HTML The comment tag is used to insert a comment in the HTML source code. A comment will be ignored by the browser. You can use comments to explain your code, which can help you when you edit the source code at a later date.  Note that you need an exclamation point after the opening bracket, but not before the closing bracket.

<BODY> Tag Attrib. The background color of the document. Deprecated. Use styles instead. rgb(x,x,x) #xxxxxx colorname bgcolor An image to use as the background. Deprecated. Use styles instead. file_name background Specifies the color of the active links in the document. Deprecated. Use styles instead. rgb(x,x,x) #xxxxxx colorname alink Description Value Attribute

Description Value Attribute Specifies the color of the visited links in the document. Deprecated. Use styles instead. rgb(x,x,x) #xxxxxx colorname vlink Specifies the color of the text in the document. Deprecated. Use styles instead. rgb(x,x,x) #xxxxxx colorname text Specifies the color of all the links in the document. Deprecated. Use styles instead. rgb(x,x,x) #xxxxxx colorname link

FONT tag Defines the size of the text in the font element. Deprecated. Use styles instead A number from 1 to 7. size Defines the font of the text in the font element. Deprecated. Use styles instead list_of_fontnames face Defines the color of the text in the font element. Deprecated. Use styles instead rgb(x,x,x) #xxxxxx colorname color Description Value Attribute

Text Formatting Tags Defines small text <small> Defines italic text <i> Defines emphasized text < em > Defines big text <big> Defines bold text <b> Description Tag

Deprecated. Use styles instead <u> Deprecated. Use <del> instead <strike> Deprecated. Use <del> instead <s> Defines deleted text <del> Defines inserted text <ins> Defines superscripted text <sup> Defines subscripted text <sub> Defines strong text <strong>

Citations, Quotations, and Definition Tags Defines a definition term < dfn > Defines a citation <cite> Defines a short quotation <q> Defines a long quotation < blockquote > Defines the text direction < bdo > Defines an address element <address> Defines an acronym <acronym> Defines an abbreviation < abbr > Description Tag

The Most Common Character Entities: " " quotation mark " & & ampersand & > > greater than > < < less than <     non-breaking space Entity Number Entity Name Description Result

Some Other Commonly Used Character Entities: ÷ ÷ division ÷ × × multiplication × ® ® registered trademark ® © © copyright © § § section § ¥ ¥ yen ¥ £ £ pound £ ¢ ¢ cent ¢ Entity Number Entity Name Description Result

The Frameset Tag The <frameset> tag defines how to divide the window into frames Each frameset defines a set of rows or columns The values of the rows/columns indicate the amount of screen area each row/column will occupy Important: You cannot use the <body></body> tags together with the <frameset></frameset> tags! However, if you add a <noframes> tag containing some text for browsers that do not support frames, you will have to enclose the text in <body></body> tags!

FRAMESET tag Defines the number and size of rows in a frameset pixels % * rows Defines the number and size of columns in a frameset pixels % * cols Description Value Attribute

FRAME tag Defines the URL of the file to show in the frame URL src Determines scrollbar action yes no auto scrolling When set to noresize the user cannot resize the frame noresize noresize Defines a unique name for the frame (to use in scripts) frame_name name Defines the left and right margins in the frame pixels marginwidth Defines the top and bottom margins in the frame pixels marginheight Specifies whether or not to display border around the frame 0 1 frameborder Description Value Attribute

<A> Anchor tag(Hyperlinks) TF Where to open the target URL. _blank - the target URL will open in a new window _self - the target URL will open in the same frame as it was clicked _parent - the target URL will open in the parent frameset _top - the target URL will open in the full body of the window _blank _parent _self _top target STF Names an anchor. Use this attribute to create a bookmark in a document. In future versions of XHTML the name attribute will be replaced by the id attribute!! section_name name STF The target URL of the link URL href

List Tags Defines a definition description < dd > Defines a definition term < dt > Defines a definition list <dl> Defines a list item < li > Defines an unordered list < ul > Defines an ordered list < ol > Description Tag

Forms A form is an area that can contain form elements. Form elements are elements that allow the user to enter information (like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.) in a form. A form is defined with the <form> tag. The most used form tag is the <input> tag. The type of input is specified with the type attribute . <form> <input> <input> </form>

INPUT tag attributes Indicates the type of the input element. The default value is "text" button checkbox file hidden image password radio reset submit text type

Defines the alignment of text following the image. Note: Only used with type="image" left right top middle bottom align A comma-separated list of MIME types that indicates the MIME type of the file transfer. Note: Only used with type="file" list_of_mime_types accept Description Value Attribute

Defines a unique name for the input element. Note: This attribute is required with type="button", type="checkbox", type="file", type="hidden", type="image", type="password", type="text", and type="radio“ field_name Name Defines the maximum number of characters allowed in a text field. Note: Only used with type="text" number maxlength Indicates that the input element should be checked when it first loads. Note: Used with type="checkbox" and type="radio" checked checked Defines an alternate text for the image. Note: Only used with type="image" text alt

Defines the URL of the image to display. Note: Only used with type="image" URL src Defines the size of the input element. Note: Cannot be used with type="hidden" number_of_char size Indicates that the value of this field cannot be modified. Note: Only used with type="text" readonly readonly

For buttons, reset buttons and submit buttons: Defines the text on the button. For image buttons: Defines the symbolic result of the field passed to a script. For checkboxes and radio buttons: Defines the result of the input element when clicked. The result is sent to the form's action URL. For hidden, password, and text fields: Defines the default value of the element. Note: Cannot be used with type="file" Note: This attribute is required with type="checkbox" and type="radio" value value

TEXTAREA tag Specifies the number of rows visible in the text-area number rows Specifies the number of columns visible in the text-area number cols Description Value Attribute

Indicates that the user cannot modify the content in the text-area readonly readonly Specifies a name for the text-area name_of_textarea name

TABLE tag Defines a table footer < tfoot > Defines a table body < tbody > Defines a table head < thead > Defines the attribute values for one or more columns in a table < col > Defines groups of table columns < colgroup > Defines a table caption <caption> Defines a table cell <td> Defines a table row < tr > Defines a table header < th > Defines a table <table> Description Tag

“ num” pixel distance b/w border and content <CELLPADDING=“num”> “ num” space between each cell <CELLSPACING=“num”> “ number” pixel wide border <BORDER=“number”> Width of table Width Value is num Rowspan A num. To merge data of number of cells Colspan Rgb color code or name Bgcolor Top/bottom/middle/baseline Valign Left/right/center Align

Values to FRAME attri. LHS & RHS Vsides No side Void Right Hand side RHS Left hand side LHS Top and Bottom sides Hsides -----do------ Box All four sides Border Bottom side has single border line of each cell Below Top side has single border line of each cell Above

Values to RULES attri. All rows and columns All Rules between columns only Cols Rules between rows only Rows Cell border between cell groups and row groups only Groups No cell border None

Html Presentation Of Web Page Making

More Related Content

What's hot

Viewers also liked

Similar to Html Presentation Of Web Page Making

More from Sandeep Supal

Recently uploaded

Html Presentation Of Web Page Making