Intodcution to Html
Download as PPT, PDF1 like519 views
HTML describes the structure and content of web pages using tags. It uses tags like <p> for paragraphs and <img> to embed images. Common tags also include <head> for metadata, <body> for visible content, and <html> to enclose the entire page. HTML forms allow creating interactive elements like text fields, checkboxes, and buttons to collect user input. HTML5 is the latest version and introduces new semantic elements, multimedia capabilities, and APIs for building web applications.
Intodcution to Html
- 1. HTML
- 2. What is HTML HTML describes the contentcontent and formatformat of web pages using tags. Ex. Title Tag: <title>A title </title> It’s the job of the web browser to interpret tags and display the content accordingly.
- 3. HTML Syntax An HTML file contains both formatting tagsformatting tags and contentcontent Document content is what we see on the webpage. Tags are the HTML codes that control the appearance of the document content.
- 4. HTML Syntax HTML syntax: two-sided tag: <tag attributes> document content </tag> Starting tag Properties of the tag. Optional! Actual content appears in webpage. It could be empty Closing tag Examples: <p> WAD Lecture </p> <body bgcolor = “yellow”> UCF </body>
- 5. HTML Syntax HTML syntax: one-sided tag: <tag /> e.g. Breaking line tag: <br/> Horizontal line tag: <hr/>
- 6. Structure of the web page Starting with the tag <html>...</html> <html> <head> </head> <body> ………… <body> </html> Everything about the web page should be enclosed here
- 7. Structure of the web page Inside the <html></html> tag Each web page has a headhead part described in <head></head> tag: <html> <head> <title> WAD Lecture</title> </head> <body> …. <body> </html> The title of the web page should be put here
- 8. Structure of the web page Inside the <html></html> tag Each web page has a bodybody part described in <body></body> tag: <html> <head> <title> WAD Lecture </title> </head> <body> This is a sample HTML file. </body> </html> The content of the whole web page should be put here
- 9. Introduction to some common tags Paragraph tag Heading tags Text formatting tags Hyperlink tags List tag
- 10. Paragraph tags <p>...</p> <html> <head> <title> WAD Lecture</title> </head> <body> <p> Here is the first paragraph. </p> <p> Here is the second paragraph. </p> </body> </html>
- 11. HTML Headings HTML headings are defined with the <h1> to <h6> tags. Example <h1>Hello World</h1> <h2>Hello World</h2> <h3>Hello World</h3> …….. <h6>Hello World</h6>
- 12. Formatting HTML Tags <html> <body> <p><b>This text is bold</b> <strong>This text is strong</strong> <i>This text is italic</i> <em>This text is emphasized</em> <code>This is computer output</code> This is<sub> subscript</sub> and <sup>superscript</sup></p> </body> </html>
- 13. Formatting HTML Tags HTML uses tags like <b> and <i> for formatting output, like bold or italic text. These HTML tags are called formatting tags. NOTE: Often <strong> renders as <b>, and <em> renders as <i>. However, there is a difference in the meaning of these tags: <b> or <i> defines bold or italic text only. <strong> or <em> means that you want the text to be rendered in a way that the user understands as "important". Today, all major browsers render strong as bold and em as italics. However, if a browser one day wants to make a text highlighted with the strong feature, it might be cursive for example and not bold!
- 14. Hyperlink The HTML <a> tag defines a hyperlink. A hyperlink (or link) is a word, group of words, or image that you can click on to jump to another document. When you move the cursor over a link in a Web page, the arrow will turn into a little hand. The most important attribute of the <a> element is the href attribute, which indicates the link's destination. By default, links will appear as follows in all browsers: An unvisited link is underlined and blue A visited link is underlined and purple An active link is underlined and red
- 15. Hyperlink Link to another location or file Syntax: <a href= “http://www.yahoo.com”> Link to yahoo </a> StartingStarting TagTag Attribute of the tag: the address ofAttribute of the tag: the address of the hyperlinkthe hyperlink Content displayed on theContent displayed on the pagepage Ending tagEnding tag
- 16. Link Link to web site <a href= “http://www.yahoo.com”> Link to Yahoo </a> Link to document <a href=“http://www.biteducampus.in/img/building.jpg”>Link </a> Email link <a href= “mailto:[email protected]”> Link to email </a>
- 17. List tags Ordered list: used to display information in a numeric order. The syntax for creating an ordered list is: <ol > e.g. <ol > <li>item1 </li> <li> Name: Your name </li> <li>item2 </li> <li> Section: ### </li> … <li> Instructor: Yuping </li> </ol> </ol> Result:
- 18. List tags Unordered list: list items are not listed in a particular order. The syntax is: <ul > e.g. <ul> <li>item1 </li> <li> Name: Amit Parmar </li> <li>item2 </li> <li> Lecture: Web Application devlopment </li> … <li> Instructor: Amit Parmar </li> </ul> </ul> Result :
- 19. List tags Description list is used to describe various terms. The <dl> tag is supported in all major browsers. Definition and Usage The <dl> tag defines a description list. The <dl> tag is used in conjunction with <dt> (defines terms/names) and <dd> (describes each term/name). <dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl>
- 20. Include a Picture : <img> Tag The <img> tag is empty, which means that it contains attributes only, and has no closing tag. To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display. <img src=“FILENAME” /> <img src=“FILENAME” alt=“text” /> E.g. <img src=“logo.gif” alt=“Google logo” /> <img src=“logo.gif” />
- 21. HTML Tables: <table> tag Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). td stands for "table data," and holds the content of a data cell. A <td> tag can contain text, links, images, lists, forms, other tables, etc. <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
- 22. HTML Tables: <table> tag Header information in a table are defined with the <th> tag. All major browsers display the text in the <th> element as bold and centered. <table border="1"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
- 23. <span> Tag The <span> tag is used to group inline-elements in a document. The <span> tag provides no visual change by itself. The <span> tag provides a way to add a hook to a part of a text or a part of a document. When a text is hooked in a <span> element, you can style it with CSS, or manipulate it with JavaScript. <p>My mother has <span style="color:blue;font-weight:bold">blue</span> eyes and my father has <span style="color:darkolivegreen;font-weight:bold">dark green</span> eyes.</p>
- 24. HTML Layouts Most websites have put their content in multiple columns (formatted like a magazine or newspaper). Multiple columns are created by using <div> or <table> elements. CSS are used to position elements, or to create backgrounds or colorful look for the pages. Even though it is possible to create nice layouts with HTML tables, tables were designed for presenting tabular data - NOT as a layout tool! Better option is the div element. <div> .. </div> The div element is a block level element used for grouping HTML elements.
- 25. <div> tag <html> <head> </head> <body> <div id=“header”> ….. </div> <div id=“footer”> ….. </div> </body> </html>
- 26. HTML Forms: <form> tag HTML forms are used to pass data to a server. An HTML form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements. The <form> tag is used to create an HTML form: <form> ... input elements … </form>
- 27. HTML Forms - The Input Element The <input> element is used to select user information. Text Fields: <input type="text"> defines a one-line input field that a user can enter text into: <form> First name: <input type="text" name="firstname"><br> Last name: <input type="text" name="lastname"> </form> The form itself is not visible. Also note that the default width of a text field is 20 characters.
- 28. HTML Forms - The Input Element Password Field <input type="password"> defines a password field: <form> Password: <input type="password" name="pwd"> </form> The characters in a password field are masked (shown as asterisks or circles).
- 29. HTML Forms - The Input Element Radio Buttons <input type="radio"> defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices: <form> <input type="radio" name="sex“ value="male">Male<br> <input type="radio" name="sex" value="female">Female </form> How the HTML code above looks in a browser: o Male o Female
- 30. HTML Forms - The Input Element Checkboxes <input type="checkbox"> defines a checkbox. Checkboxes let a user select ZERO or MORE options of a limited number of choices. <form> <input type="checkbox" name="vehicle“ value="Bike"> I have a bike<br/> <input type="checkbox" name="vehicle" value="Car"> I have a car </form> How the HTML code above looks in a browser: I have a bike I have a car
- 31. <fieldset> Tag The <fieldset> tag is used to group related elements in a form. <form> <fieldset> <legend>Personalia:</legend> Name: <input type="text"><br> Email: <input type="text"><br> Date of birth: <input type="text"> </fieldset> </form>
- 32. HTML ( HyperText Markup Language) What is HTML5? HTML5 will be the new standard for HTML. The previous version of HTML, HTML 4.01, came in 1999. The internet has changed significantly since then. HTML5 is intended to subsume not only HTML 4, but also XHTML 1 and DOM Level 2 HTML. HTML5 is also cross-platform (it does not care whether you are using a tablet or a smartphone, a netbook, notebook or a Smart TV).
- 33. Some rules for HTML5 New features should be based on HTML, CSS, DOM, and JavaScript The need for external plugins (like Flash) needs to be reduced Error handling should be easier than in previous versions Scripting has to be replaced by more markup HTML5 should be device-independent The development process should be visible to the public