Download presentation
Presentation is loading. Please wait.
1
Introduction to Programming
HTML INTRO Introduction to Programming
2
Books
3
World Wide Web
4
World Wide Web
5
World Wide Web
6
World Wide Web
7
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
8
Structure
9
HTML Introduction
10
Character Encoding/Stylesheets/Javascript
11
HTML Attributes
12
Rules
13
Rules
14
New Elements
15
Browser Support
16
Internet Explorer
17
HTML Headings
18
Semantic Elements
19
Divisions
20
CSS
21
Article Tag
22
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=" is a link</a> HTML Images <img src="w3schools.jpg"/>
23
Prepare this page in Notepad, the picture will act as a link.
HTML Basic Prepare this page in Notepad, the picture will act as a link.
24
HTML Lines 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>
25
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>
26
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>
27
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
28
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>
29
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>
30
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>
31
CSS Box Model
32
Hyperlinks
33
Hyperlinks
34
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>
35
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>
36
HTML Tables
37
HTML Tables
38
HTML Tables
39
HTML Tables
40
HTML Tables
41
Tables
42
Introduction to Programming
HTML INTRO Introduction to Programming
Similar presentations
