1 Outline 3.1 Introduction 3.2 Editing HTML 3.3 First HTML Example 3.4 W3C HTML Validation Service 3.5 Headers 3.6 Linking 3.7 Images 3.8 Special Characters and More Line Breaks 3.9 Unordered Lists 3.10 Nested and Ordered Lists 3.11 Web Resources Introduction to HTML
22
Embed
Outline 3.1 Introduction 3.2 Editing HTML 3.3 First HTML Example
Introduction to HTML. Outline 3.1 Introduction 3.2 Editing HTML 3.3 First HTML Example 3.4 W3C HTML Validation Service 3.5 Headers 3.6 Linking 3.7 Images 3.8 Special Characters and More Line Breaks 3.9 Unordered Lists 3.10 Nested and Ordered Lists - PowerPoint PPT Presentation
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
1
Outline3.1 Introduction3.2 Editing HTML3.3 First HTML Example3.4 W3C HTML Validation Service3.5 Headers3.6 Linking3.7 Images3.8 Special Characters and More Line Breaks3.9 Unordered Lists3.10 Nested and Ordered Lists3.11 Web Resources
Introduction to HTML
2
Objectives
In this chapter, you will learn:
To understand important components of HTML documents.
To use HTML to create Web pages. To be able to add images to Web pages. To understand how to create and use hyperlinks to
navigate Web pages. To be able to mark up lists of information.
3
3.1 Introduction
HTML = HyperText Markup Language
A markup language
Separation of the presentation of a document from the structure of the document’s information
Technology of the World Wide Web Consortium (W3C)
4
3.2 Editing HTML
HTML documents are in source-code form
It can be edited by using a text editor (e.g. Notepad, Wordpad, emacs, etc. EditPlus text editor is included in IPositif CD)
.html or .htm file-name extension
Web server: Stores HTML documents
Web browser: Requests HTML documents
5
3.3 First HTML Example
HTML Comments: start with <!-- and end with -->
html element: <html> head element: <head>
Head section of HTML document Title of the document Style sheets and scripts
body element: <body> Body section of HTML document Page’s content the browser displays
Start tag
End tag
6
<!-- Fig. 4.1: main.html --><!-- Our first Web page -->
<html> <head> </head>
<body>
</body>
</html>
Start tag
end tag
Head section
Body section
Comments
7
<!-- Fig. 4.1: main.html --><!-- Our first Web page -->
<html> <head> <title>Internet and WWW How to Program - Welcome</title> </head>
<body> <p>Welcome to XHTML!</p> </body></html>
Example1: First HTML example: main.html
8
Creating your first html file:
Make sure you have installed EditPlus text editor included in IPositif CD Click on EditPlus icon. (a) Select: File -> New -> HTML Pages: Delete all the initial content of the page Copy the codes in the example 1 and paste it in EditPlus (b) Save the file. Select File -> Save As. At the file name, type ‘name.html’ Click the file ‘name.html’ from the directory where you saved the file. You will see the browser page similar like the one in page 7