13
Introduction to HTML YLLSS - S3

Introduction to HTML

Embed Size (px)

DESCRIPTION

Introduction to HTML. YLLSS - S3. HTML. HyperText Markup Language It uses tags( 標籤 ) to markup a web page A tag is like a label, it is used to present its properties, and it is in the form of “ < “ and “ > ” . e.g. . Understand the concept of HTML 1. - PowerPoint PPT Presentation

Citation preview

Page 1: Introduction to HTML

Introduction to HTML

YLLSS - S3

Page 2: Introduction to HTML

HTML HyperText Markup Language It uses tags( 標籤 ) to markup a web p

age A tag is like a label, it is used to presen

t its properties, and it is in the form of “<“ and “>”. e.g. <table>

Page 3: Introduction to HTML

Understand the concept of HTML 1

This is an object, we call it LAMP

LAMP

Page 4: Introduction to HTML

Understand the concept of HTML 1

Then, we put a tag on this object.

LAMP<turn on> </turn on>

Page 5: Introduction to HTML

Understand the concept of HTML 2

This is another object, we call it BOOK

BOOK

Page 6: Introduction to HTML

Understand the concept of HTML 2

Then, we put another tag on it.

BOOK<Open> </Open>

Page 7: Introduction to HTML

Understand the concept of HTML 3

Now, we add some information in it.

BOOK<Open page=10> </Open>

Page 8: Introduction to HTML

Understand the concept of HTML 4 Here, we can see that there

should be a lot of different tags for different purposes. And so as HTML, now, by doing the following exercise, try to know more on HTML.

Page 9: Introduction to HTML

Understand the concept of HTML 4 Use Notepad, write the

following codes and save it as temp.htm and then open it with I.E.

Page 10: Introduction to HTML

Understand the concept of HTML 4 Now, a tag <font> is added.

Page 11: Introduction to HTML

Understand the concept of HTML 4 In fact, we can create an object by HTML

code, e.g. <input> will generate an object for input.

Page 12: Introduction to HTML

Understand the concept of HTML 4 Now, add a property value

Page 13: Introduction to HTML

Understand the concept of HTML 4 In fact, the input type can be easily

changed from input box to a button, just as follows: