Post on 12-Jan-2016
ACM 511 Course Notes
ACM 511
HTML
Week -1
ACM 511 Course Notes
Books
ACM 511 Course Notes
World Wide Web
ACM 511 Course Notes
World Wide Web
ACM 511 Course Notes
World Wide Web
ACM 511 Course Notes
World Wide Web
ACM 511 Course Notes
HTML
What is HTML?HTML is a language for describing web pages.HTML stands for Hyper Text Markup LanguageHTML is not a programming language, it is a markup languageA markup language is a set of markup tagsHTML uses markup tags to describe web pages
HTML TagsHTML markup tags are usually called HTML tagsHTML 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 tagStart and end tags are also called opening tags and closing tags
ACM 511 Course Notes
Web Pages
HTML Documents = Web PagesHTML documents describe web pagesHTML documents contain HTML tags and plain textHTML 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.
ACM 511 Course Notes
Structure
ACM 511 Course Notes
HTML Introduction
ACM 511 Course Notes
Page Structure
ACM 511 Course Notes
Character Encoding/Stylesheets/Javascript
ACM 511 Course Notes
HTML Elements
HTML Element SyntaxAn HTML element starts with a start tag / opening tagAn HTML element ends with an end tag / closing tagThe element content is everything between the start and the end tagSome HTML elements have empty contentMost HTML elements can have attributes
<html><body><p>This is my first paragraph.</p></body></html>
ACM 511 Course Notes
HTML Attributes
ACM 511 Course Notes
HTML Headings
ACM 511 Course Notes
HTML Basic
HTML ParagraphsHTML 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<img src="w3schools.jpg"/>
ACM 511 Course Notes
HTML Basic
Prepare this page in Notepad, the picture will act as a link.
ACM 511 Course Notes
HTML Lines
HTML LinesThe <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>
ACM 511 Course Notes
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>This is<sub> subscript</sub> and
<sup>superscript</sup></p>
</body></html>
ACM 511 Course Notes
HTML Fonts (not supported)
<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 511 Course Notes
Hyperlinks
ACM 511 Course Notes
Hyperlinks
ACM 511 Course Notes
HTML Lists
HTML Unordered ListsAn 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 ListsAn ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
<ol><li>Coffee</li><li>Milk</li></ol>
ACM 511 Course Notes
HTML Lists
HTML Definition ListsA 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 511 Course Notes
HTML Tables
ACM 511 Course Notes
HTML Tables
ACM 511 Course Notes
HTML Tables
ACM 511 Course Notes
HTML Tables
ACM 511 Course Notes
HTML Tables
http://www.silentblade.com/SplitImage.zip
ACM 511 Course Notes
Tables
ACM 511 Course Notes
HTML Forms
ACM 511 Course Notes
HTML Forms (Input) (Password)
ACM 511 Course Notes
HTML Forms (Checkbox)
ACM 511 Course Notes
HTML Forms (Radio Button)
ACM 511 Course Notes
Dropdown List
ACM 511 Course Notes
HTML Forms
DO IT YOURSELF
ACM 511 Course Notes
Block Elements
ACM 511 Course Notes
Inline Elements
ACM 511 Course Notes
Grouping Block Elements
ACM 511 Course Notes
Grouping Inline Elements