week -1 acm 262 acm 262 course notes. html what is html? html is a language for describing web...

WEEK -1

ACM 262

ACM 262 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


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.

http://www.w3schools.com/html/html_intro.asp

http://www.w3schools.com/html/html_intro.asp


HTML Introduction

<html><body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body></html>


HTML Basic

HTML HeadingsHTML 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>


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" width="104" height="142" />


HTML Basic

Prepare this page in Notepad, the picture will act as a link.


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 contentEmpty elements are closed in the start tagMost HTML elements can have attributes

<html><body><p>This is my first paragraph.</p></body></html>


HTML Attributes

HTML AttributesHTML elements can have attributesAttributes provide additional information about an elementAttributes are always specified in the start tagAttributes come in name/value pairs like: name="value“

<a href="http://www.w3schools.com">This is a link</a>

HTML Headings

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>

HTML CommentsComments can be inserted into the HTML code to make it more readable and understandable.


HTML Headings


HTML Paragraphs

HTML Line BreaksUse 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.


HTML Formatting


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>


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>


HTML Styles

Styling HTML with CSSCSS 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


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>


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>


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>


HTML Links

HTML Links - The target Attribute<a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

HTML Links - The name AttributeThe 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


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


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


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>


HTML Tables


HTML Tables

http://www.silentblade.com/SplitImage.zip




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>


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>


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>


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" />


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


HTML Forms

DO IT YOURSELF