1 / 48

HTML (Hyper Text Markup Language)

Submitted by Act Academy

Download Presentation

HTML (Hyper Text Markup Language)

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. Hyper Text Markup Language HTML

  2. <!DOCTYPE html><html><body><h1>My First Heading</h1><p>My first paragraph.</p></body></html> HTML Introduction • Example Explained • The DOCTYPE declaration defines the document type • The text between <html> and </html> describes the web page • The text between <body> and </body> is the visible page content • The text between <h1> and </h1> is displayed as a heading • The text between <p> and </p> is displayed as a paragraph

  3. HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is a markup language A markup language is a set of markup tags The tags describes document content HTML documents containHTML tags and plain text HTML documents are also called web pages What is HTML?

  4. HTML markup tags are usually called HTML tags HTML tags are keywords (tag names) surrounded by angle brackets like <html> 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 end tag is written like the start tag, with a forward slash before the tag name Start and end tags are also called opening tags and closing tags HTML Tags

  5. "HTML tags" and "HTML elements" are often used to describe the same thing. • But strictly speaking, an HTML element is everything between the start tag and the end tag, including the tags: • HTML Element: • <p>This is a paragraph.</p> HTML Elements

  6. The purpose of a web browser (such as Google Chrome, Internet Explorer, Firefox, Safari) is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page: Web Browsers

  7. Since the early days of the web, there have been many versions of HTML: HTML Versions

  8. The <!DOCTYPE> declaration helps the browser to display a web page correctly. There are many different documents on the web, and a browser can only display an HTML page 100% correctly if it knows the HTML type and version used. The <!DOCTYPE> Declaration

  9. HTML5 <!DOCTYPE html> HTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> XHTML 1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Common Declarations

  10. <html> </html> • <body> </body> • Bgcolor • Background • Topmargin • Leftmargin • Rightmargin • bottommargin tags

  11. <head></head> • <title></title> • <p></p> • Align • left,right,center

  12. The comment tag is used to insert comments in the source code. Comments are not displayed in the browsers. You can use comments to explain your code, which can help you when you edit the source code at a later date. This is especially useful if you have a lot of code. It is also a good practice to use the comment tag to "hide" scripts from browsers without support for it (so they don't show them as plain text): <!--This can be viewed in the HTML part of a document--> HTML Comment <!--

  13. The <!DOCTYPE> declaration must be the very first thing in your HTML document, before the <html> tag. The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in. In HTML 4.01, the <!DOCTYPE> declaration refers to a DTD, because HTML 4.01 was based on SGML. The DTD specifies the rules for the markup language, so that the browsers render the content correctly. HTML5 is not based on SGML, and therefore does not require a reference to a DTD. <!DOCTYPE html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE>

  14. HTML 5 <!DOCTYPE html> HTML 4.01 Strict This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font). Framesets are not allowed. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> HTML 4.01 Transitional This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE>

  15. HTML 4.01 Frameset This DTD is equal to HTML 4.01 Transitional, but allows the use of frameset content. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> XHTML 1.0 Strict This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE>

  16. XHTML 1.0 Transitional This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> XHTML 1.0 Frameset This DTD is equal to XHTML 1.0 Transitional, but allows the use of frameset content. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> XHTML 1.1 This DTD is equal to XHTML 1.0 Strict, but allows you to add modules (for example to provide ruby support for East-Asian languages). <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <!DOCTYPE>

  17. Writing HTML Using Notepad or TextEdit • HTML can be edited by using a professional HTML editor like: • Adobe Dreamweaver • Microsoft Expression Web • CoffeeCup HTML Editor • However, for learning HTML we recommend a text editor like Notepad (PC) or TextEdit (Mac). We believe using a simple text editor is a good way to learn HTML. HTML Editors

  18. Follow the 4 steps below to create your first web page with Notepad.

  19. To start Notepad go to: Start    All Programs        Accessories            Notepad Step 1 : Start Notepad

  20. Type your HTML code into your Notepad: Step 2: Edit Your HTML with Notepad

  21. Select Save as.. in Notepad's file menu. When you save an HTML file, you can use either the .htm or the .html file extension. There is no difference, it is entirely up to you. Save the file in a folder that is easy to remember. Step 3: Save Your HTML

  22. Start your web browser and open your html file from the File, Open menu, or just browse the folder and double-click your HTML file. The result should look much like this: STEP 4 : Run the HTML in Your Browser

  23. Attribute • Color • Size • Face <font> </font>

  24. <b></b> • <i></i> • <u></u> • <strike></strike> • <sub></sub> • <sup></sup> • <tt></tt> • <pre></pre> Tags for formatting

  25. <h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6> Heading Level

  26. Attributes • Width • Height • border <imgsrc=“”>

  27. <hr width="25%" color="#6699ff" size="6" /> Horizontal rule

  28. Bgcolor Scrollamount Width Height Direction (up,down,left,right) Loop <marquee></marquee>

  29. <menu><li type="disc">List item 1</li><li type="circle">List item 2</li><li type="square">List item 3</li></menu> Menu

  30. Attributes • Start • Type A,a,i,I,1 • <ol> • <li>one</li> • <li>two</li> • </ol> Order list

  31. Attributes • Start • Type circle,square,disc • <ul> • <li>one</li> • <li>two</li> • </ul> Unorderlist

  32. Definition Description, Definition List, Definition List • <dd> • <dl><dt>Definition Term</dt><dd>Definition of the term</dd><dt>Definition Term</dt><dd>Definition of the term</dd></dl> Definition Term

  33. <embedsrc="yourfile.mid" width="100%" height="60" align="center"> <embedsrc="yourfile.mid" autostart="true" hidden="false" loop="false"><noembed><bgsoundsrc="yourfile.mid" loop="1"></noembed> HTML Embed Object

  34. The <object> tag defines an embedded object within an HTML document. Use this element to embed multimedia (like audio, video, Java applets, ActiveX, PDF, and Flash) in your web pages. You can also use the <object> tag to embed another webpage into your HTML document. You can use the <param> tag to pass parameters to plugins that have been embedded with the <object> tag. <object width="400" height="400“ data="helloworld.swf"></object> <object> Tag

  35. Attributes • bgcolor • Width • Height • Cellspacing • Cellpadding • background <table></table> <tr></tr> <td></td> <th></th>

  36. The <a> tag defines a hyperlink, which is used to link from one page to another. • <a href=“”>Clickme</a> • <a href=“”><imgsrc=“”></a> • 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 Anchor TAG

  37. HTML <basefont> Tag. Not Supported in HTML5 • <basefont color="red" size="5" /> <basefont> Tag

  38. The <style> tag is used to define style information for an HTML document. Inside the <style> element you specify how HTML elements should render in a browser. Each HTML document can contain multiple <style> tags. <style> Tag

  39. <html><head><style type="text/css">h1 {color:red;}p {color:blue;}</style></head><body><h1>A heading</h1><p>A paragraph.</p></body></html> style

  40. The <blockquote> tag specifies a section that is quoted from another source. The <basefont> tag is not supported in HTML5. Use CSS instead. <blockquote cite="http://www.worldwildlife.org/who/index.html">For 50 years, WWF has been protecting the future of nature. The world’s leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</blockquote> <blockquote> Tag

  41. <form></form> • <form action="mailto:you@yourdomain.com">Action • Method post/get FORM

  42. <input type=“text”> • <input type=“radio”> • <input type=“checkbox”> • <input type=“password”> • <textarea></textarea> (rows,cols) • <select></select> • (allow=multiple) for list • Size to define number of fields • <input type=“file”> INPUT TAG

  43. The <fieldset> tag is used to group related elements in a form. • The <fieldset> tag draws a box around the related elements. • <form>  <fieldset>    <legend>Personalia:</legend>    Name: <input type="text"><br>    Email: <input type="text"><br>    Date of birth: <input type="text">  </fieldset></form> fieldset

  44. <frameset rows=“50%,50%”> <frame src=“”> <frame src=“”> </frameset> Frameset

  45. <iframesrc=“” width=400 height=400> </iframe> iframe

  46. The <map> tag is used to define a client-side image-map. An image-map is an image with clickable areas. The required name attribute of the <map> element is associated with the <img>'s usemap attribute and creates a relationship between the image and the map. The <map> element contains a number of <area> elements, that defines the clickable areas in the image map. Map tag

  47. <imgsrc="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"><map name="planetmap">  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus"></map> Image map

  48. <meta name="Description" content="Description of your site"><meta name="keywords" content="keywords describing your site"> <meta HTTP-EQUIV="Refresh" CONTENT="4;URL=http://www.yourdomain.com/"> <meta http-equiv="Pragma" content="no-cache"> <meta name="rating" content="General"> <meta name="robots" content="all"> <meta name="robots" content="noindex,follow"> Meta Tag

More Related