INTRODUCTION FOR HTML
Download as PPTX, PDF0 likes187 views
HTML uses markup tags to describe web pages. Common tags include <p> for paragraphs, <h1>-<h6> for headings, <img> for images, and <table> for tables. Lists can be ordered (<ol>), unordered (<ul>), or definitions (<dl>). Forms (<form>) contain elements like text fields and buttons to collect user input.
INTRODUCTION FOR HTML
- 2. INTRODUCTION TO HTML HTML uses markup tags to describe web pages. Tim Berners-Lee HTML stands for Hyper-Text Markup Language (HTML) is the World Wide Web’s primary language. HTML is not a programming language. A markup language a set of markup tags.
- 3. Web sites and Browser What is Web-sites? A website is a collection of publicly accessible, interlinked Web pages that share a single domain name. Websites can be created and maintained by an individual, group, business or organization to serve a variety of purposes. Together, all publicly accessible websites constitute the World Wide Web(www). For example, Facebook , Twitter etc… what is Web Browser? A web browser, or simply "browser," is an application used to access and view websites. Common web browsers include Microsoft Internet Explorer, Google Chrome, Mozilla Firefox, and Apple Safari. For example,
- 4. HTML Elements and Tags A tag is always enclosed in angle bracket <>like <HTML> HTML tags normally come in pairs like <HTML> and </HTML> i.e. Start tag = <HTML> End tag =</HTML> Start and end tags are also called opening tags and closing tags
- 5. HTML Page Structure <HTML> - Describe HTML web page that is to be viewed by a web browser. <HEAD> - This defines the header section of the page. <TITLE> - This shows a caption in the title bar of the page. <BODY> - This tag show contents of the web page will be displayed.
- 6. HOW TO START Notepad Write html code in notepad. Save the file with (.Html)/(.Htm) extension. View The Page In Any Web Browser Viz. INTERNET EXPLORER, Google Chrome ,Firfox ,Opera Etc. The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and display them correctly Web Browsers
- 7. A Simple HTML Document <HTML> <HEAD> <TITLE> MY FIRST PAGE </TITLE> </HEAD> <BODY> MANAL SOFTECH PVT LTD </BODY> </HTML>
- 8. With a wealth of new features,XHTML 1.0 was are A work in Progress intends to replace HTML 3.2,HTML 4 and XHTML 1.x HTML Version 1995HTML 2.0 1997 HTML 3.2 1999HTML 4.01 2000 XHTML 1.0 2014HTML 5 Developed by the IETF ”s HTML Working Group Which Closed in 1995. W3C Recommendation for HTML which represented the consensus on HTML features for 1996,HTML 3.2 as tables,applets,text-flow around images .While providing backwards compatibility with the existing HTML 2.0 Standard. Added Support for more multimedia options, scripting laguages,style sheets. Better printing facilities and documents that are more accessible to users with disabilities
- 9. HTML Heading Tags HTML headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading. <h6> defines the least important heading. Example <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6>
- 10. Headings Are Important <h1> headings should be used for main headings, followed by <h2> headings, then the less important <h3>, and so on. Search engines use the headings to index the structure and content of your web pages. Users often skim a page by its headings. It is important to use headings to show the document structure.
- 11. HTML Paragraph Tags A paragraph always starts on a new line, and is usually a block of text. The HTML <p> element defines a paragraph. <p>This is A Paragraph</p> <p>This is a another Paragraph</p> Open tag<p> and Close tag</p> are Define. Default alignment left to right.
- 12. The HTML <br> element defines a line break. Example, <p>This is<br>a paragraph<br>with line breaks.</p> Use <br> if you want a line break (a new line) without starting a new paragraph: HTML Line Break & Horizontal Line Tag
- 13. HTML Line Break & Horizontal Line Tag The <hr> element is used to separate content (or define a change) in an HTML page: The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule. Example, <h1>This is heading 1</h1> <p>This is some text.</p> <hr> <h2>This is heading 2</h2> <p>This is some other text.</p> <hr>
- 14. <b> <big> <em> <i> <small> <strong> <sub> <super> <ins> <del> <tt> <u> <strike> Defines bold text Defines big text Defines emphasized text Defines italic text Defines small text Defines strong text Defines subscripted text Defines superscripted text Defines inserted text Defines deleted text Defines teletype text Defines underline text Defines strike text Text Formatting Tags
- 15. Font Tag This element is used to format the size, typeface and color of the enclosed text. Commonly used fonts for web pages are Arial, Comic Sans MS , Lucida Sans Unicode, Arial Black, Courier New, Times New Roman, Arial Narrow, Impact, Verdana. The size attribute in font tag takes values from 1 to 7.
- 17. Background & Text Color Tag The attribute bgcolor is used for changing the back ground color of the page. <body bgcolor=“Green” > Text is use to change the color of the enclosed text. <body text=“White”>
- 18. – Left alignment<align=“left”> – Right alignment<align=“right”> –Center alignment <align=“center”> Text Alignment Tag It is use to alignment of the text.
- 19. Result of Hyperlink Code
- 20. Hyperlink Tag A hyperlink is a reference (an address) to a resource on the web. Hyperlinks can point to any resource on the web: an HTML page, an image, a sound file, a movie, etc. The HTML anchor element <a>, is used to define both hyperlinks and anchors. <a href="url">Link text</a> The href attribute defines the link address. <a href="http://www.facebook.com/">FACEBOOK</a>
- 21. Image Tag To display an image on a page, you need to use the src attribute. src stands for "source". value of the src attribute is the URL of the image you want to display on your page. It is a empty tag. <IMG SRC ="url"> <IMG SRC="picture.gif“> <IMG SRC="picture.gif“ HEIGHT="30" WIDTH="50">
- 22. <img> <Src> <Alt> <Width> <Height> <Border> <Hspace> <Vspace> <Align> <background> Defines an image display an image on a page,Src stands for "source". Define "alternate text" for an image Defines the width of the image Defines the height of the image Defines border of the image Horizontal space of the image Vertical space of the image Align an image within the text Add a background image to an HTML page Image attributes - <img> tag
- 23. Result of the Image
- 24. Code & Result of the Image
- 25. Code & Result of the Image
- 26. <table> <tr> <td> <th> <Caption> <colgroup> <col> <thead> <tbody> <tfoot> <Cellspacing> <Cellpadding> <Colspan> <rowspan> <Border> used to create table table is divided into rows each row is divided into data cells Headings in a table caption to the table Defines groups of table columns Defines the attribute values for one or more columns in a table Defines a table head Defines a table body Defines a table footer amount of space between table cells. space around the edges of each cell No of column working with will span No of rows working with will span attribute takes a number HTML Table Tag
- 27. Header <html><body> <h4>Horizontal Header:</h4> <table border="1"> <tr> <th>Name</th> <th>Loan No</th> <th>Amount</th> </tr> <tr> <td>Jones</td> <td>L-1</td> <td>5000</td></tr> </table><br><br> <h4>Vertical Header:</h4> <table border="5"> <tr> <th>Name</th> <td>Jones</td> </tr> <tr> <th>Loan No</th> <td>L-1</td> </tr> <tr> <th>Amount</th> <td>5000</td></tr> </table> </body></html>
- 28. <html> <body> <h3>Table without border</h3> <table> <tr> <td>MILK</td> <td>TEA</td> <td>COFFEE</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> </body> </html> Code & Result of the Table
- 29. Table Code with Colspan & Rowspan <html> <head> <title>Cell that spans two columns:</title> </head> <body> <h4>Cell that spans two columns:</h4> <table border="4"> <tr> <th>Name</th> <th colspan="2">Loan No</th> </tr> <tr> <td>Jones</td> <td>L-1</td> <td>L-2</td> </tr> </table> <h4>Cell that spans two rows:</h4> <table border="8"> <tr> <th>Name</th> <td>Jones</td></tr><tr> <th rowspan="2">Loan No</th> <td>L-1</td></tr><tr> <td>L-2</td></tr></table> </body> </html>
- 30. <html> <body> <table border="1"> <caption>My Caption</caption> <tr> <td>Milk</td> <td>Tea</td> </tr> <tr> <td></td> <td>Coffee</td> </tr> </table> </body> </html> Table Code with Caption & ColSpacing
- 31. <html><body> <h3>Without cellpadding:</h3> <table border="2" bgcolor="green"> <tr> <td>Jones</td> <td>Smith</td></tr> <tr> <td>Hayes</td> <td>Jackson</td></tr></table> <h4>With cellpadding:</h4> <table border="8" cellpadding="10" background="file:///C:/WINDOWS/ FeatherTexture.bmp"> <tr> <td>Jones</td> <td>Smith</td></tr> <tr> <td>Hayes</td> <td>Jackson</td></tr></table> </body></html> Cellpadding,Image & Backcolor Code
- 32. </> HTML HTML FORM Tutorial in Hindi Part 9
- 33. Lists provide methods to show item or element sequences in document content. There are three main types of lists: HTML List Tag – Unordered lists:-unordered lists are bulleted. – Ordered lists:- Ordered lists are numbered. – Definition lists:- Used to create a definition list
- 34. List Tags <LI> <OL> <UL> <DL> <DT> <DD> <LI> is an empty tag,it is used for representing the list items Ordered list Unordered list Defines a definition list Defines a term (an item) in a definition list Defines a description of a term in a definition list
- 35. The TYPE attribute has the following value like:- – TYPE = "1" (Arabicnumbers) – TYPE = "a" (Lowercasealphanumeric) – TYPE = "A" (Uppercasealphanumeric) – TYPE = "i" (Lowercase Romannumbers) – TYPE = "I" (Uppercase Romannumbers) By default Arabic numbers are used Ordered HTML List <ol type=“1”> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
- 36. • TYPE attribute to the <UL> tag to show different bullets like:- –Disc –Circle –Square <ul style="list-style-type:disc;"> • The attribute TYPE can also be used with <LI> element. Unordered HTML List
- 37. HTML Description Lists A description list is a list of terms, with a description of each term. <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl>
- 38. The syntax:- <form> . input elements . </form> HTML Form A form is an area that can contain form element, form tag are attributes .action ,method or target Form elements are elements that allow the user to enter information in a form. like text fields, textarea fields, drop-down menus, radio buttons and checkboxes etc .A form is defined with the <form> tag.
- 39. <form> <input> <text> <textarea> <password> <label> <option> <select> <button> <value> <checkbox> <dropdown box> Defines a form for user input used to create an input field Creates a single line text entry field Defines a text-area (a multi-line text input control) Creates a single line text entry field. And the characters entered are shown as asterisks (*) Defines a label to a control Creates a Radio Button. Defines a selectable list (a drop-down box) Defines a push button attribute of the option element. select or unselect a checkbox A drop-down box is a selectable list Form Tags
- 40. Code of the HTML Form <html><body><form> <h1>Create a Internet Mail Account</h1> <p>First Name <input type="text" name="T1" size="30"></p> <p>Last Name <input type="text" name="T2" size="30"></p> <p>Desired Login Name <input type="text" name="T3" size="20"> @mail.com</p> <p>Password <input type="password" name="T4" size="20"></p> <input type="radio" checked="checked" name="sex" value="male" /> Male</br> <input type="radio" name="sex" value="female" /> Female <p>Birthday <input type="text" name="T6" size="05"> <select size="1" name="D2"> <option>-Select One-</option> <option>January</option> <option>February</option> <option>March</option> </select> <input type="text" name="T7" size="10"></p> TypeYourself<textarea rows="4" name="S1" cols="20"></textarea> <br><input type="submit" value="Accept" name="B1"> <input type="reset“ value="Cancel" name="B2"></br> </form></body></html>
- 41. Result of the Form Code