120 likes | 303 Views
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. Introduction. What is HTML?
E N D
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
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) • 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/ • Check your pages at http://everest.bic.nus.edu.sg/project_submissions/hons/upload/xxx/
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 • <HTML> • <HEAD> • <TITLE>A minimal HTML page</TITLE> • </HEAD> • <BODY> • This is a minimal HTML page • </BODY> • </HTML>
Basic Markup Tags • Essential HTML Tags • HTML • HEAD • TITLE • BODY • <BODY BACKGROUND=“XXX” TEXT=#000000 LINK=#0000FF VLINK =#008000 ALINK=#FF0000> • <BODY BGCOLOR=#FFFFFF TEXT=#000000 LINK=#0000FF VLINK =#008000 ALINK=#FF0000> • HEADINGS • <H1> to <H6> • PARAGRAPHS • <P> • LINE BREAKS • <BR> • HORIZONTAL RULES • <HR>
Lists • Ordered Lists • <OL> • <LI>apples • <LI>oranges • <LI>watermelons • </OL> • Unordered Lists • <UL> • <LI>apples • <LI>oranges • <LI>watermelons • </UL>
Lists • Mixing Ordered & Unordered Lists • <UL> • <LI>apples • <LI>oranges • <UL> • <LI>Sunkist • <LI>Jaffa • <LI>California • <LI>Mandarin • </UL> • <LI>watermelons • </UL>
Lists • Definition Lists • <DL COMPACT> • <DT>ECP • <DD>East Coast Parkway • <DT>CTE • <DD>Central Expressway • <DT>PIE • <DD>Pan Island Expressway • </DL>
Text Formatting • Address • <ADDRESS>…</ADDRESS> • Preformatted Text • <PRE>…</PRE> • Blockquote • <BLOCKQUOTE>…</BLOCKQUOTE> • Bold • <B>…</B> • Italic • <I>…</I> • Teletype • <TT>…</TT> • Font • <FONT SIZE=7 FACE=“Arial”>…</FONT> • Centering • <CENTER>…</CENTER>
Images in your Pages • Accepted formats • Graphics Interlace Format (GIF) • Joint Photographic Experts Group (JPEG) • Possible usages • <IMG SRC=“XXX”> • <IMG SRC=“XXX” ALT=“Description”> • <IMG SRC=“XXX” ALT=“Description”> • <IMG SRC=“XXX” ALT=“Description” WIDTH=50%> • <IMG SRC=“XXX” ALT=“Description” WIDTH=50 HEIGHT=100> • <IMG SRC=“XXX” ALT=“Description” WIDTH=50 HEIGHT=100 ALIGN=“left”> • <IMG SRC=“XXX” ALT=“Description” WIDTH=50 HEIGHT=100 ALIGN=“right”> • <IMG SRC=“XXX” ALT=“Description” WIDTH=50 HEIGHT=100 ALIGN=“top”> • <IMG SRC=“XXX” ALT=“Description” WIDTH=50 HEIGHT=100 ALIGN=“bottom”> • <IMG SRC="http://us.a1.yimg.com/us.yimg.com/i/ww/m5v2.gif"> • etc…
Anchors • Anchors • Primarily Used for linking page sections & pages • Also used to point to an email address • Linking page sections on the same page • <H1>Table of Contents</H1> • <A HREF=“toc.html#A”>Section A</A> • <A HREF=“#A”>Section A</A> • … • <A NAME=“A”>Section A</A> • … • Linking pages • <A HREF=“page2.html”>Page 2</A>
Anchors • Linking page sections on different pages • toc.html: • <H1>Table of Contents</H1> • <A HREF=“chap1.html#A”>Chapter 1 Section A</A> • chap1.html: • <A HREF=“#A”>Section A</A> • … • <A NAME=“A”>Section A</A> • … • Pointing to an email address • <A HREF=“mailto:tinwee@bic.nus.edu.sg”>Dr. Tan Tin Wee</A> • Opening pages in another Browser • <A HREF=“ref.html” TARGET=_blank>References</A>
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.gif bg2.gif bg3.gif • bg4.gif bg5.gif bg6.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