Presentation is loading. Please wait.

Presentation is loading. Please wait.

SIBILL Workshop: Web Design 1 Course Roadmap (Part 1) Introduction – What is HTML? – HTML Editors – How do I put it all online? Basic Markup Tags – How.

Published byMagnus Ryan Modified over 9 years ago

Similar presentations

Presentation on theme: "SIBILL Workshop: Web Design 1 Course Roadmap (Part 1) Introduction – What is HTML? – HTML Editors – How do I put it all online? Basic Markup Tags – How."— Presentation transcript:

1 SIBILL Workshop: Web Design 1 Course Roadmap (Part 1) Introduction – What is HTML? – HTML Editors – How do I put it all online? Basic Markup Tags – How does it work? – The minimal HTML page – Essential HTML Tags Lists Text Formatting Images in your Pages Anchors

2 SIBILL Workshop: Web Design 2 Introduction What is HTML? HyperText Markup Language (HTML) is the standard web publishing language that is understood by web browsers. HTML Specification can be found at World Wide Web Consortium ( http://www.W3C.org ) http://www.W3C.org HTML Editors What You See Is What You Get (WYSIWYG) Editors Netscape Composer Microsoft FrontPage HomeSite Text Editors Notepad NoteTab Light Arachnophilia How do I put it all online? Project submission page at http://everest.bic.nus.edu.sg/project_submissions/hons/ http://everest.bic.nus.edu.sg/project_submissions/hons/ Check your pages at http://everest.bic.nus.edu.sg/project_submissions/hons/upload/xxx/ http://everest.bic.nus.edu.sg/project_submissions/hons/upload/xxx/

3 SIBILL Workshop: Web Design 3 Basic Markup Tags How does it work? HTML tags consists of “ ” HTML tags are usually in pairs End tags has a “/” preceding the element text Each pairs of tags indicate the type of formatting needed The minimal HTML page A minimal HTML page This is a minimal HTML page

4 SIBILL Workshop: Web Design 4 Basic Markup Tags Essential HTML Tags HTML HEAD TITLE BODY HEADINGS to PARAGRAPHS LINE BREAKS HORIZONTAL RULES

5 SIBILL Workshop: Web Design 5 Lists Ordered Lists apples oranges watermelons Unordered Lists apples oranges watermelons

6 SIBILL Workshop: Web Design 6 Lists Mixing Ordered & Unordered Lists apples oranges Sunkist Jaffa California Mandarin watermelons

7 SIBILL Workshop: Web Design 7 Lists Definition Lists ECP East Coast Parkway CTE Central Expressway PIE Pan Island Expressway

8 SIBILL Workshop: Web Design 8 Text Formatting Address … Preformatted Text … Blockquote … Bold … Italic … Teletype … Font … Centering …

9 SIBILL Workshop: Web Design 9 Images in your Pages Accepted formats Graphics Interlace Format (GIF) Joint Photographic Experts Group (JPEG) Possible usages etc…

10 SIBILL Workshop: Web Design 10 Anchors Primarily Used for linking page sections & pages Also used to point to an email address Linking page sections on the same page Table of Contents Section A … … Linking pages Page 2

11 SIBILL Workshop: Web Design 11 Anchors Linking page sections on different pages toc.html: Table of Contents Chapter 1 Section A chap1.html: Section A … … Pointing to an email address Dr. Tan Tin Wee Opening pages in another Browser References

12 SIBILL Workshop: Web Design 12 Exercise Create a Web Page with links to your favourite Websites Some background images that can be found in the “Backgrounds” folder on your desktop bg1.gifbg2.gifbg3.gif bg4.gifbg5.gifbg6.gif Some hexadecimal values of colors that you might want to use: #000000 – Black#FFFFFF – White #0000FF – Blue#FF0000 – Red #00FF00 – Green#00FFFF – Aqua #8A2BE2 – Blue Violet#FF6347 – Tomato #4169E1 – Royal Blue#F4A460 – Sandy Brown #32CD32 – Lime Green#FFD700 - Gold

Download ppt "SIBILL Workshop: Web Design 1 Course Roadmap (Part 1) Introduction – What is HTML? – HTML Editors – How do I put it all online? Basic Markup Tags – How."

Similar presentations

Introduction to HTML. A Web Page is.. An ASCII (text) file.. Whose filename ends with.htm or.html –index.html or cookie-recipe.htm Contains HTML tags.

Introduction to HTML. A Web Page is.. An ASCII (text) file.. Whose filename ends with.htm or.html –index.html or cookie-recipe.htm Contains HTML tags.
HTML I. HTML Hypertext mark-up language. Uses tags to identify elements of a page so that a browser such as Internet explorer can render the page on a.

HTML I. HTML Hypertext mark-up language. Uses tags to identify elements of a page so that a browser such as Internet explorer can render the page on a.
Computers: Tools for an Information Age Writing Your Own Web Page: Using HTML and Web Authoring Tools.

Computers: Tools for an Information Age Writing Your Own Web Page: Using HTML and Web Authoring Tools.
HTML Basics 1450 Technology Seminar Copyright 2003, Matthew Hottell.

HTML Basics 1450 Technology Seminar Copyright 2003, Matthew Hottell.
HTML popo.

HTML popo.
HTML. The World Wide Web Protocols Addresses HTML.

HTML. The World Wide Web Protocols Addresses HTML.
1 تقنيات الانترنت عال457 HTML. 2 HTML  HTML – HyperText Markup Language – The Language of Web Pages on the World Wide Web. HTML is a text formatting.

1 تقنيات الانترنت عال457 HTML. 2 HTML  HTML – HyperText Markup Language – The Language of Web Pages on the World Wide Web. HTML is a text formatting.
INTRODUCTION TO HYPERTEXT MARKUP LANGUAGE 1. Outline  Introduction  Markup Languages  Editing HTML  Common Tags  Headers  Text Styling  Linking.

INTRODUCTION TO HYPERTEXT MARKUP LANGUAGE 1. Outline  Introduction  Markup Languages  Editing HTML  Common Tags  Headers  Text Styling  Linking.
Chapter 4 Marking Up With Html: A Hypertext Markup Language Primer.

Chapter 4 Marking Up With Html: A Hypertext Markup Language Primer.
HTML and Web Page Design Presented by Frank H. Osborne, Ph. D. © 2005 ID 2950 Technology and the Young Child.

HTML and Web Page Design Presented by Frank H. Osborne, Ph. D. © 2005 ID 2950 Technology and the Young Child.
Introduction to HTML CPS470 Software Engineering Fall 1998.

Introduction to HTML CPS470 Software Engineering Fall 1998.
HTML Computing Concepts HTML - An Introduction 1.

HTML Computing Concepts HTML - An Introduction 1.
 2003 Prentice Hall, Inc. All rights reserved. Chapter 4 - Introduction to XHTML: Part 1 Outline 4.1 Introduction 4.2 Editing XHTML 4.3 First XHTML Example.

 2003 Prentice Hall, Inc. All rights reserved. Chapter 4 - Introduction to XHTML: Part 1 Outline 4.1 Introduction 4.2 Editing XHTML 4.3 First XHTML Example.
 2004 Prentice Hall, Inc. All rights reserved. Introduction to XHTML: Part 1.

 2004 Prentice Hall, Inc. All rights reserved. Introduction to XHTML: Part 1.
Basic HTML UCR Webmasters Support Group Derk Adams.

Basic HTML UCR Webmasters Support Group Derk Adams.
Introduction to HTML 2004 CIS101. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.

Introduction to HTML 2004 CIS101. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.
Creating a Web Page HyperText Markup Language. HTML Documents  Created using any text editor  Notepad  Vi, Pico, or Emacs  If using word-processor,

Creating a Web Page HyperText Markup Language. HTML Documents  Created using any text editor  Notepad  Vi, Pico, or Emacs  If using word-processor,
Marking Up With Html: A Hypertext Markup Language Primer

Marking Up With Html: A Hypertext Markup Language Primer
 2003 Prentice Hall, Inc. All rights reserved. Chapter 4 - Introduction to XHTML: Part 1 Outline 4.1 Introduction 4.2 Editing XHTML 4.3 First XHTML Example.

 2003 Prentice Hall, Inc. All rights reserved. Chapter 4 - Introduction to XHTML: Part 1 Outline 4.1 Introduction 4.2 Editing XHTML 4.3 First XHTML Example.
Glencoe Digital Communication Tools Create a Web Page with HTML Chapter Contents Lesson 4.1Lesson 4.1 Get Started with HTML (85) Lesson 4.2Lesson 4.2 Format.

Glencoe Digital Communication Tools Create a Web Page with HTML Chapter Contents Lesson 4.1Lesson 4.1 Get Started with HTML (85) Lesson 4.2Lesson 4.2 Format.

Similar presentations

Ads by Google