Your SlideShare is downloading. ×
0
Html intro
Html intro
Html intro
Html intro
Html intro
Html intro
Html intro
Html intro
Html intro
Html intro
Html intro
Html intro
Html intro
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Html intro

4,895

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,895
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
325
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HTML <ul><li>With HTML you can create your own Web site .
  • 2. HTML stands for Hyper Text Markup Language.
  • 3. it is a markup language and it is a set of markup tags.
  • 4. HTML markup tags are called HTML tags.
  • 5. HTML tags are keywords surrounded by angle brackets like &lt;html&gt;
  • 6. It should have one start and end tag.
  • 7. HTML documents describe web pages.
  • 8. We do not need any HTML editor ,web server,web site.
  • 9. To edit the HTML , NOTEPAD is enough.
  • 10. we save an HTML file, either the .htm or the .html file extension. </li></ul>
  • 11. SAMPLE PROGRAM &lt;html&gt; &lt;body&gt; &lt;h1&gt;My First Heading&lt;/h1&gt; &lt;p&gt;My first paragraph.&lt;/p&gt; &lt;/body&gt; &lt;/html&gt;
  • 12. HTML headings: HTML headings are defined with the &lt;h1&gt; to &lt;h6&gt; tags. SYNTAX : &lt;h1&gt;This is a heading&lt;/h1&gt; HTML Paragraphs: HTML paragraphs are defined with the &lt;p&gt; tag. SYNTAX : &lt;p&gt;This is a paragraph.&lt;/p&gt; HTML Links: HTML links are defined with the &lt;a&gt; tag. SYNTAX : &lt;a href=&amp;quot;http://www.google.com&amp;quot;&gt;This is a link&lt;/a&gt; HTML Images: HTML images are defined with the &lt;img&gt; tag. SYNTAX : &lt;img src=&amp;quot;w3schools.jpg&amp;quot; width=&amp;quot;104&amp;quot; height=&amp;quot;142&amp;quot; /&gt;
  • 13. HTML Attributes: Attributes are always specified in the start tag Attributes come in name/value pairs like: name=&amp;quot;value&amp;quot; HTML links are defined with the &lt;a&gt; tag. The link address is specified in the href attribute Attribute names and attribute values are case-insensitive. SYNTAX : &lt;a href=&amp;quot;http://www.w3schools.com&amp;quot;&gt;This is a link&lt;/a&gt; HTML Lines: The &lt;hr /&gt; tag creates a horizontal line in an HTML page. SYNTAX : &lt;p&gt;This is a paragraph&lt;/p&gt; &lt;hr /&gt; &lt;p&gt;This is a paragraph&lt;/p&gt; HTML Comments: Comments are i gnored by the browser and are not displayed. SYNTAX : &lt;!-- This is a comment --&gt; HTML Line Breaks: Use the &lt;br /&gt; tag if you want a line break (a new line) without starting a new paragraph. SYNTAX : &lt;p&gt;This is&lt;br /&gt;a para&lt;br /&gt;graph with line breaks&lt;/p&gt;
  • 14. HTML Formatting Tags: Text formatting tags Tag Description &lt;b&gt; Defines bold text &lt;big&gt; Defines big text &lt;em&gt; Defines emphasized text &lt;i&gt; Defines italic text &lt;small&gt; Defines small text &lt;strong&gt; Defines strong text &lt;sub&gt; Defines subscripted text &lt;sup&gt; Defines superscripted text &lt;ins&gt; Defines inserted text &lt;del&gt; Defines deleted text “ Computer Output&amp;quot; Tags Tag Description &lt;code&gt; Defines computer code text &lt;kbd&gt; Defines keyboard text &lt;samp&gt; Defines sample computer code &lt;tt&gt; Defines teletype text &lt;var&gt; Defines a variable &lt;pre&gt; Defines preformatted text Citations, Quotations, and Definition Tags Tag Description &lt;abbr&gt; Defines an abbreviation &lt;acronym&gt; Defines an acronym &lt;address&gt; Defines contact information for the author/owner of a document &lt;bdo&gt; Defines the text direction &lt;blockquote&gt; Defines a long quotation &lt;q&gt; Defines a short quotation &lt;cite&gt; Defines a citation &lt;dfn&gt; Defines a definition term
  • 15. The HTML Style Attribute: Tags Description &lt;center&gt; Defines centered content &lt;font&gt; and &lt;basefont&gt; Defines HTML fonts &lt;s&gt; and &lt;strike&gt; Defines strikethrough text &lt;u&gt; Defines underlined text Attributes Description align Defines the alignment of text bgcolor Defines the background color color Defines the text color SYNTAX : Style Example - Background Color &lt;body style=&amp;quot;background-color:yellow&amp;quot;&gt; &lt;h2 style=&amp;quot;background-color:red&amp;quot;&gt;This is a heading&lt;/h2&gt; &lt;p style=&amp;quot;background-color:green&amp;quot;&gt;This is a paragraph.&lt;/p&gt; &lt;/body&gt;
  • 16. SYNTAX: Style Example - Font, Color and Size &lt;body&gt; &lt;h1 style=&amp;quot;font-family:verdana&amp;quot;&gt;A heading&lt;/h1&gt; &lt;p style=&amp;quot;font-family:arial;color:red;font-size:20px;&amp;quot;&gt;A paragraph.&lt;/p&gt; &lt;/body&gt; SYNTAX: Style Example - Text Alignment &lt;body&gt; &lt;h1 style=&amp;quot;text-align:center&amp;quot;&gt;This is a heading&lt;/h1&gt; &lt;p&gt;The heading above is aligned to the center of this page.&lt;/p&gt; &lt;/body&gt;
  • 17. HTML Hyperlinks (Links): <ul><li>A hyperlink (or link) is a word, group of words, or image that you can click on to jump to a
  • 18. new document or a new section within the current document.
  • 19. When you move the cursor over a link in a Web page, the arrow will turn into a little hand .
  • 20. Links are specified in HTML using the &lt;a&gt; tag.
  • 21. The &lt;a&gt; tag can be used in two ways: </li></ul>1. To create a link to another document, by using the href attribute. 2. To create a bookmark inside a document, by using the name attribute. SYNTAX: &lt;a href=&amp;quot;url&amp;quot;&gt;Link text&lt;/a&gt; &lt;a href=&amp;quot;http://www.w3schools.com/&amp;quot;&gt;Visit W3Schools&lt;/a&gt; Link Tags: Tag Description &lt;a&gt; Defines an anchor
  • 22. The target Attribute: The target attribute specifies where to open the linked document. SYNTAX: &lt;a href=&amp;quot;http://www.w3schools.com/&amp;quot; target=&amp;quot;_blank&amp;quot;&gt;Visit W3Schools!&lt;/a&gt; The name Attribute: The name attribute specifies the name of an anchor. The name attribute is used to create a bookmark inside an HTML document. Bookmarks are not displayed in any special way. They are invisible to the reader. * A named anchor inside an HTML document: &lt;a name=&amp;quot;tips&amp;quot;&gt;Useful Tips Section&lt;/a&gt; * Create a link to the &amp;quot;Useful Tips Section&amp;quot; inside the same document: &lt;a href=&amp;quot;#tips&amp;quot;&gt;Visit the Useful Tips Section&lt;/a&gt; * create a link to the &amp;quot;Useful Tips Section&amp;quot; from another page: &lt;a href=&amp;quot;http://www.w3schools.com/html_links.htm#tips&amp;quot;&gt; Visit the Useful Tips Section&lt;/a&gt;
  • 23. HTML The &lt;img&gt; Tag and the Src Attribute : SYNTAX: &lt;img src=&amp;quot;url&amp;quot; alt=&amp;quot;some_text&amp;quot;/&gt; HTML The Alt Attribute : SYNTAX: &lt;img src=&amp;quot;boat.gif&amp;quot; alt=&amp;quot;Big Boat&amp;quot; /&gt; HTML Image Tags: Tag Description &lt;img&gt; Defines an image &lt;map&gt; Defines an image-map &lt;area&gt; Defines a clickable area inside an image-map HTML Tables: Tag Description &lt;table&gt; Defines a table &lt;th&gt; Defines a table header &lt;tr&gt; Defines a table row &lt;td&gt; Defines a table cell &lt;caption&gt; Defines a table caption &lt;colgroup&gt; Defines a group of columns in a table, for formatting &lt;col&gt; Defines attribute values for one or more columns in a table &lt;thead&gt; Groups the header content in a table &lt;tbody&gt; Groups the body content in a table &lt;tfoot&gt; Groups the footer content in a table
  • 24. HTML Tables header and the Border Attribute: &lt;table border=&amp;quot;1&amp;quot;&gt; &lt;tr&gt; &lt;th&gt;Header 1&lt;/th&gt; &lt;th&gt;Header 2&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;row 1, cell 1&lt;/td&gt; &lt;td&gt;row 1, cell 2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;row 2, cell 1&lt;/td&gt; &lt;td&gt;row 2, cell 2&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; HTML list: An ordered list: 1. The first list item 2. The second list item 3. The third list item An unordered list: * List item * List item * List item
  • 25. HTML Forms: HTML Form Tags: Tag Description &lt;form&gt; Defines an HTML form for user input &lt;input&gt; Defines an input control &lt;textarea&gt; Defines a multi-line text input control &lt;label&gt; Defines a label for an input element &lt;fieldset&gt; Defines a border around elements in a form &lt;legend&gt; Defines a caption for a fieldset element &lt;select&gt; Defines a select list (drop-down list) &lt;optgroup&gt; Defines a group of related options in a select list &lt;option&gt; Defines an option in a select list &lt;button&gt; Defines a push button
  • 26. Text Fields &lt;input type=&amp;quot;text&amp;quot; /&gt; defines a one-line input field that a user can enter text into: Password Field &lt;input type=&amp;quot;password&amp;quot; /&gt; defines a password field: Radio Buttons &lt;input type=&amp;quot;radio&amp;quot; /&gt; defines a radio button. Radio buttons let a user select ONLY ONE one of a limited number of choices: Checkboxes &lt;input type=&amp;quot;checkbox&amp;quot; /&gt; defines a checkbox. Checkboxes let a user select ONE or MORE options of a limited number of choices. Submit Button &lt;input type=&amp;quot;submit&amp;quot; /&gt; defines a submit button.

×