1 / 33

An Introduction to HTML

HTML stands for Hyper Text Markup Language, a language with set of markup tags to describe web pages. An HTML file must have an .htm or .html file extension. HTML is comprised of u201celementsu201d and u201ctagsu201d that begins with <html> and ends with </html>.

ifourtechnolab
Download Presentation

An Introduction to 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) iFour Consultancy https://www.ifourtechnolab.com/

  2. A markup language is a set of markup tags Introduction To HTML • A markup language is a set of markup tags • What Is HTML? • Markup language for describing web pages • HTML stands for Hyper Text Markup Language, a language with set of markup tags • Documents are described by HTML tags • Each HTML tag describes different document content https://www.ifourtechnolab.com/

  3. Creating HTML Pages • An HTML file must have an .htmor .html file extension • HTML files can be created with text editors: • NotePad, NotePad ++, PSPad • Or HTML editors (WYSIWYG Editors): • Microsoft FrontPage • Macromedia Dreamweaver • Netscape Composer • Microsoft Word • Visual Studio https://www.ifourtechnolab.com/

  4. HTML Structure • HTML is comprised of “elements” and “tags” • Begins with <html>and ends with </html> • Elements (tags) are nested one inside another: • Tags have attributes: • HTML describes structure using two main sections: <head>and <body> <html> <head></head> <body></body> </html> <img src="logo.jpg" alt="logo" /> https://www.ifourtechnolab.com/

  5. HTML Code Formatting • The HTML source code should be formatted to increase readability and facilitate debugging • Every block element should start on a new line • Every nested (block) element should be indented • Browsers ignore multiple whitespaces in the page source, so formatting is harmless • For performance reasons, formatting can be sacrificed https://www.ifourtechnolab.com/

  6. First HTML Page Test.html <!DOCTYPE HTML> <html> <head> <title>My First HTML Page</title> </head> <body> <p>This is some text...</p> </body> </html> https://www.ifourtechnolab.com/

  7. First HTML Page: Tags • An HTML element consists of an opening tag, a closing tag and the content inside. Opening tag <!DOCTYPE HTML> <html> <head> <title>My First HTML Page</title> </head> <body> <p>This is some text...</p> </body> </html> Closing tag https://www.ifourtechnolab.com/

  8. First HTML Page: Header <!DOCTYPE HTML> <html> <head> <title>My First HTML Page</title> </head> <body> <p>This is some text...</p> </body> </html> HTML header https://www.ifourtechnolab.com/

  9. First HTML Page: Body <!DOCTYPE HTML> <html> <head> <title>My First HTML Page</title> </head> <body> <p>This is some text...</p> </body> </html> HTML body https://www.ifourtechnolab.com/

  10. Some Simple Tags • Hyperlink tags • Image tags • Text formatting tags <a href="http://www.telerik.com/" title="Telerik">Link to Telerik Web site</a> <img src="logo.gif" alt="logo" /> This text is <em>emphasized.</em> <br />new line<br /> This one is <strong>more emphasized.</strong> https://www.ifourtechnolab.com/

  11. Tags Attributes • Tags can have attributes • Attributes specify properties and behavior • Example: • Few attributes can apply to every element: • Id, style, class, title • The id is unique in the document • Content of title attribute is displayed as hint when the element is hovered with the mouse • Some elements have obligatory attributes Attributealtwith value "logo" <img src="logo.gif" alt="logo" /> https://www.ifourtechnolab.com/

  12. Headings and Paragraphs • Heading Tags (h1 – h6) • Paragraph Tags • Sections: div and span <h1>Heading 1</h1> <h2>Sub heading 2</h2> <h3>Sub heading 3</h3> <p>This is my first paragraph</p> <p>This is my second paragraph</p> <div style="background: skyblue;"> This is a div</div> https://www.ifourtechnolab.com/

  13. The <!DOCTYPE> Declaration • HTML documents must start with a document type definition (DTD) • It tells web browsers what type is the served code • Possible versions: HTML 4.01, XHTML 1.0 (Transitional or Strict), XHTML 1.1, HTML 5 • Example: • See http://w3.org/QA/2002/04/valid-dtd-list.html for a list of possible doctypes <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> https://www.ifourtechnolab.com/

  14. The <head> Section • Contains information that doesn’t show directly on the viewable page • Starts after the <!doctype>declaration • Begins with <head>and ends with </head> • Contains mandatory single <title>tag • Can contain some other tags, e.g. • <meta> • <script> • <style> • <!–- comments --> https://www.ifourtechnolab.com/

  15. <head> Section: <title> tag • Title should be placed between <head>and </head>tags • Used to specify a title in the window title bar • Search engines and people rely on titles <title>iFour consultancy – Sustainable Solution </title> https://www.ifourtechnolab.com/

  16. The <body> Section • The <body>section describes the viewable portion of the page • Starts after the <head></head>section • Begins with <body>and ends with </body> <html> <head><title>Test page</title></head> <body> <!-- This is the Web page body --> </body> </html> https://www.ifourtechnolab.com/

  17. Text formatting tags modify the text between the opening tag and the closing tag Ex. <b>Hello</b>makes “Hello” bold Text Formatting https://www.ifourtechnolab.com/ 17

  18. Hyperlinks: <a> Tag • Link to a document called form.html on the same server in the same directory: • Link to a document called parent.html on the same server in the parent directory: • Link to a document called cat.html on the same server in the subdirectory stuff: <a href="form.html">Fill Our Form</a> <a href="../parent.html">Parent</a> <a href="stuff/cat.html">Catalog</a> https://www.ifourtechnolab.com/

  19. Images: <img> tag • Inserting an image with <img>tag: • Image attributes: • Example: <img src="/img/basd-logo.png"> <img src="./php.png" alt="PHP Logo" /> https://www.ifourtechnolab.com/ 19

  20. Block and Inline Elements • Block elements add a line break before and after them • <div>is a block element • Other block elements are <table>, <hr>, headings, lists, <p> and etc. • Inline elements don’t break the text before and after them • <span>is an inline element • Most HTML elements are inline, e.g. <a> https://www.ifourtechnolab.com/

  21. The <div> Tag • <div>creates logical divisions within a page • Block style element • Used with CSS • Example: div-and-span.html <div style="font-size:24px; color:red">DIV example</div> <p>This one is <span style="color:red; font-weight:bold">only a test</span>.</p> https://www.ifourtechnolab.com/

  22. The <span> Tag • Inline style element • Useful for modifying a specific portion of text • Don't create a separate area (paragraph) in the document • Very useful with CSS span.html <p>This one is <span style="color:red; font-weight:bold">only a test</span>.</p> <p>This one is another <span style="font-size:32px; font-weight:bold">TEST</span>.</p> https://www.ifourtechnolab.com/

  23. HTML Tables • Tables represent tabular data • A table consists of one or several rows • Each row has one or more columns • Tables comprised of several core tags: • <table></table>: begin / end the table • <tr></tr>: create a table row • <td></td>: create tabular data (cell) • Tables should not be used for layout. Use CSS floats and positioning styles instead https://www.ifourtechnolab.com/

  24. Form Fields • Single-line text input fields: • Multi-line textarea fields: • Hidden fields contain data not shown to the user: • Often used by JavaScript code <input type="text" name="FirstName" value="This is a text field" /> <textarea name="Comments">This is a multi-line text field</textarea> <input type="hidden" name="Account" value="This is a hidden text field" /> https://www.ifourtechnolab.com/

  25. HTML Summary • HTML is the universal markup language for the Web • HTML lets you format text, add graphics, create links, input forms, frames and tables, etc., and save it all in a text file that any browser can read and display • The key to HTML is the tags, which indicates what content is coming up https://www.ifourtechnolab.com/

  26. HTML5 • DOCTYPE declaration for HTML5 is very simple: • Use <!DOCTYPE html> instead of <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN“ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> • It uses UTF-8 and you define it with just one meta tag: <meta charset="UTF-8"> • HTML5new Supported Application Programming Interfaces: • Geolocation − Now visitors can choose to share their physical location with your web application • Drag and drop − Drag and drop the items from one location to another location on a the same webpage. • Persistent Local Storage − To achieve without resorting to third-party plug-ins. • Web Workers − A next-generation bidirectional communication technology for web applications. • Server-Sent Events − HTML5 introduces events which flow from web server to the web browsers and they are called Server-Sent Events (SSE) https://www.ifourtechnolab.com/

  27. HTML5 • Removed Elements in HTML5 https://www.ifourtechnolab.com/

  28. HTML5 • New Semantic/Structural Elements in HTML5 https://www.ifourtechnolab.com/

  29. HTML5 • New Form Elements in HTML5 https://www.ifourtechnolab.com/

  30. HTML5 https://www.ifourtechnolab.com/

  31. HTML5 • New Graphics & Media Elements in HTML5 https://www.ifourtechnolab.com/

  32. HTML5 • New Input Types in HTML5 • Input Types: color,date,datetime,datetime-local,email,month,number,range,search,tel,time,url,week • InputAttribute:autocomplete,autofocus,form,formaction,formenctype,formmethod,formnovalidate,formtarget,height and width, list, multiple, min and max, placeholder, step, required • New syntax in HTML5 • This example demonstrates the different syntaxes used in an <input> tag: • Empty :<input type="text" value="John" disabled> • Unquoted :<input type="text" value=John> • Double-quoted :<input type="text" value="John Doe"> • Single-quoted :<input type="text" value='John Doe'> • In HTML5, all four syntaxes may be used, depending on what is needed for the attribute. https://www.ifourtechnolab.com/

  33. Thank You.. https://www.ifourtechnolab.com/

More Related