1 / 31

ACM 262

ACM 262. Week -1 . HTML. What is HTML? HTML is a language for describing web pages. HTML stands for  H yper  T ext  M arkup  L anguage HTML is not a programming language, it is a  markup language A markup language is a set of  markup tags

grant
Télécharger la présentation

ACM 262

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. ACM 262 Week -1 ACM 262Course Notes

  2. HTML What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is not a programming language, it is a markup language A markup language is a set of markup tags HTML uses markup tags to describe web pages HTML Tags HTML markup tags are usually called HTML tags HTML tags are keywords 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 Start and end tags are also called opening tags and closing tags ACM 262 Course Notes

  3. Web Pages HTML Documents = Web Pages HTML documents describe web pages HTML documents contain HTML tags and plain text HTML documents are also called web pages The purpose of a web browser (like Internet Explorer or Firefox) 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. http://www.w3schools.com/html/html_intro.asp ACM 262 Course Notes

  4. HTML Introduction <html><body><h1>My First Heading</h1><p>My first paragraph.</p></body></html> ACM 262 Course Notes

  5. HTML Basic HTML Headings HTML headings are defined with the <h1> to <h6> tags. <h1>This is a heading</h1><h2>This is a heading</h2><h3>This is a heading</h3> ACM 262 Course Notes

  6. HTML Basic HTML Paragraphs HTML paragraphs are defined with the <p> tag. <p>This is a paragraph.</p><p>This is another paragraph.</p> HTML Links <a href="http://www.w3schools.com">This is a link</a> HTML Images <imgsrc="w3schools.jpg" width="104" height="142" /> ACM 262 Course Notes

  7. HTML Basic Prepare this page in Notepad, the picture will act as a link. ACM 262 Course Notes

  8. HTML Elements HTML Element Syntax An HTML element starts with a start tag / opening tag An HTML element ends with an end tag / closing tag Theelement content is everything between the start and the end tag Some HTML elements have empty content Empty elements are closed in the start tag Most HTML elements can have attributes <html><body><p>This is my first paragraph.</p></body></html> ACM 262 Course Notes

  9. HTML Attributes HTML Attributes HTML elements can have attributes Attributes provide additional information about an element Attributes are always specified in the start tag Attributes come in name/value pairs like: name="value“ <a href="http://www.w3schools.com">This is a link</a> ACM 262 Course Notes

  10. HTML Headings HTML Lines The <hr /> tag creates a horizontal line in an HTML page. <p>This is a paragraph</p><hr /><p>This is a paragraph</p><hr /><p>This is a paragraph</p> HTML Comments Comments can be inserted into the HTML code to make it more readable and understandable.  <!-- This is a comment --> ACM 262 Course Notes

  11. HTML Headings ACM 262 Course Notes

  12. HTML Paragraphs HTML Line Breaks Use the <br /> tag if you want a line break (a new line) without starting a new paragraph. <p>This is<br />a para<br />graph with line breaks</p> <br> or <br /> In XHTML, XML, elements with no end tag (closing tag) are not allowed. Even if <br> works in all browsers, writing <br /> instead works better in XHTML and XML applications. ACM 262 Course Notes

  13. HTML Formatting ACM 262 Course Notes

  14. HTML Formatting <html> <body> <p><b>This text is bold</b></p> <p><strong>This text is strong</strong></p> <p><big>This text is big</big></p> <p><i>This text is italic</i></p> <p><em>This text is emphasized</em></p> <p><code>This is computer output</code></p> <p>This is<sub> subscript</sub> and <sup>superscript</sup></p> </body> </html> ACM 262 Course Notes

  15. HTML Fonts <p><font size="5" face="arial" color="red">This paragraph is in Arial, size 5, and in red text color.</font></p><p><font size="3" face="verdana" color="blue">This paragraph is in Verdana, size 3, and in blue text color.</font></p> ACM 262 Course Notes

  16. HTML Styles • Styling HTML with CSS CSS was introduced together with HTML 4, to provide a better way to style HTML elements. CSS can be added to HTML in the following ways: • in separate style sheet files (CSS files) • in the style element in the HTML head section • in the style attribute in single HTML elements ACM 262 Course Notes

  17. HTML Styles HTML Style Example - Background Color <html><body style="background-color:yellow;"><h2 style="background-color:red;">This is a heading</h2><p style="background-color:green;">This is a paragraph.</p></body></html> ACM 262 Course Notes

  18. HTML Styles HTML Style Example - Font, Color and Size <html><body><h1 style="font-family:verdana;">A heading</h1><p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p></body></html> ACM 262 Course Notes

  19. HTML Styles HTML Style Example - Text Alignment <html><body><h1 style="text-align:center;">Center-aligned heading</h1><p>This is a paragraph.</p></body></html> ACM 262 Course Notes

  20. HTML Links HTML Links - The target Attribute <a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a> HTML Links - 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. <a name="tips">Useful Tips Section</a> <a href="#tips">Visit the Useful Tips Section</a> <a href="http://www.w3schools.com/html_links.htm#tips">Visit the Useful Tips Section</a> DO IT YOURSELF ACM 262 Course Notes

  21. HTML Images • <html> • <body> • <h2>Norwegian Mountain Trip</h2> • <img border="0" src="/images/pulpit.jpg" alt="Pulpit rock" width="304" height="228" /> • </body> • </html> DO IT YOURSELF ACM 262 Course Notes

  22. HTML Tables • <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 ACM 262 Course Notes

  23. HTML Tables • <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> ACM 262 Course Notes

  24. HTML Tables ACM 262 Course Notes

  25. HTML Tables • http://www.silentblade.com/SplitImage.zip ACM 262 Course Notes

  26. HTML Lists HTML Unordered Lists An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. <ul><li>Coffee</li><li>Milk</li></ul> HTML Ordered Lists An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. <ol><li>Coffee</li><li>Milk</li></ol> ACM 262 Course Notes

  27. HTML Lists HTML Definition Lists A definition list is a list of items, with a description of each item. The <dl> tag defines a definition list. The <dl> tag is used in conjunction with <dt> (defines the item in the list) and <dd> (describes the item in the list) <dl><dt>Coffee</dt><dd>- black hot drink</dd><dt>Milk</dt><dd>- white cold drink</dd></dl> ACM 262 Course Notes

  28. HTML Forms HTML Forms - The Input Element <form>First name: <input type="text" name="firstname" /><br />Last name: <input type="text" name="lastname" /></form> Password Field <form>Password: <input type="password" name="pwd" /></form> ACM 262 Course Notes

  29. HTML Forms Radio Buttons <form><input type="radio" name="sex" value="male" /> Male<br /><input type="radio" name="sex" value="female" /> Female</form> Checkboxes <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> <input type="submit" value="Submit" /> ACM 262 Course Notes

  30. HTML Forms Dropdown Lists <html> <body> <form action=""> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> </form> </body> </html> DO IT YOURSELF ACM 262 Course Notes

  31. HTML Forms DO IT YOURSELF ACM 262 Course Notes

More Related