Transcript Slide 1
HTML Programming Language HTML Programming Language 1. Introduction 2. HTML Editor 3. Web Page Development 1) Introduction • HTML – – – – HyperText Markup Language is the major language of the Internet's World Wide Web ability to bring together text, pictures, sounds, and links HTML Version 4.0 - plus some additional features that have been widely and consistently implemented in browsers Introduction <html> <head> • Hypertext <link rel="stylesheet" href="style.css" – Active text type="text/css"> – Link <title> – Clicking causes an action </title></head> • Markup Language <body><h3> – Tags indicate formatting and </h3><br> document structure <hr><table> – Source is processed by a program <tr><th> </th></tr><td> that understands the tags and </td> </table> formats the page <form>... </body> 2) HTML Editor • • – – – – – – – – HTML documents are plain-text (also known as ASCII) files that can be created using any text editor. Popular editor Netscape Composer Microsoft Frontpage Microsoft Visual InterDev HomeSite HotDog Web Publisher Dreamweaver Other notepad, word. 3) Web Page Development • Preparing a web page – Writing vehicle • Programming in HTML • Authoring software – Browser • Test the code locally • Test the code on the server – Server • Test links to other sites • Store your published site Web Page Development • HTML document - tags – – HTML is composed of tags Tags - tells browser how to display the information provided – HTML tags are always enclosed in angle-brackets ( < > ) and are case-insensitive <tag> ... </tag> e.g., <H1> and </H1> – Generally used in pairs • Open tag • Closing tag – same tag with / in front Web Page Development – <HTML> … </HTML> • Beginning and end of every HTML document – <HEAD> … </HEAD> • Contains information about the document including the title that is to appear in the title bar – <BODY> … </BODY> • All content for the page is placed between these tags – <!-- … --> • Comment tags Web Page Development • HTML document – basic tags <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML> If you view this from the browser, you will see a blank page Web Page Development • • Each document consists of head and body text. The head contains the title, and the body contains the actual text that is made up of paragraphs, lists, and other elements. Web Page Development example <html> <head> <TITLE>A Simple HTML Example</TITLE> </head> <body> <H1>HTML is Easy To Learn</H1> <P>Welcome to the world of HTML. This is the first paragraph. While short it is still a paragraph!</P> <P>And this is the second paragraph.</P> </body> </html> Web Page Development • HTML document – heading – – – HTML has six levels of headings, numbered 1 through 6, with 1 being the largest Headings are typically displayed in larger and/or bolder fonts than normal body text The syntax of the heading element is: <Hy>Text of heading </Hy> where y is a number between 1 and 6 specifying the level of the heading Web Page Development • HTML document – heading tags <H1> … </H1> <H2> … </H2> <H3> … </H3> <H4> … </H4> <H5> … </H5> <H6> … </H6> Largest heading Smallest heading Web Page Development • HTML document - body – – Background color / graphics Attributes of <BODY> BGCOLOR=”code” Specify color for background of the screen BACKGROUND=”path/file” Tiles the graphic in the file to fit the screen <BODY BGCOLOR=”green”> <BODY BGCOLOR=”#00FF00”> <BODY BACKGROUND=”flower.jpg”> Web Page Development • HTML Document – list - HTML supports unnumbered, numbered, and definition lists • Unnumbered Lists – – – – – <UL> <LI> apples <LI> bananas <LI> grapefruit </UL> • Output - apples - bananas - grapefruit Web Page Development • Numbered List <OL> <LI> oranges <LI> peaches <LI> grapes </OL> • Output 1. oranges 2. peaches 3. grapes Find - Definition List & Nested List Web Page Development • HTML Document – text formatted – – – – – – <BR> - tag break same as enter/return <B>…</B> - bold text <I> …</I> - italic text <U>…</U> - underline <PRE>…</PRE> - generate text in a fixedwidth font <BLOCKQUOTE>…</BLOCKQUOTE> - tag to include lengthy quotations in a separate block on the screen Web Page Development • HTML Document – linking – Hyperlink - browser highlights the identified text or image with color and/or underlines to indicate that it is a hypertext link – Relative linking - the path to the linked file relative to the location of the current file. – <A HREF=“page1.html”> Click Page 1 </A> – Absolute linking - linking to documents that are not directly related <A HREF=http://www.ukm.my>UKM</A> Web Page Development • HTML Document – mailto – send electronic mail to a specific person or mail alias by including the mailto attribute in a hyperlink <A href=mailto:[email protected]> Mail to Miss Faridatul</A> Web Page Development • HTML Document – line break tag <BR> Line Break --- Forces a new line <br>Learning HTML<br>is<BR>fun!</P> Web Page Development • HTML Document – image – – – – Format such as *.gif, *.jpeg, *.jpg, *.xbm, *png. <IMG SRC=“picture1.gif” > <IMG SRC=picture1.gif HEIGHT=100 WIDTH=65> <A HREF=“page1.html"><IMG SRC=“picture1.gif"></A> Web Page Development – GIF • Graphics Interchange Format • Use for graphics – JPG • Joint Photographic Experts Group • Use for photographs – PNG • Portable Network Graphics • Expected to replace GIF Web Page Development • Tables – – – – <TABLE> ... </TABLE> - define table in HTML <TR> ... </TR> - specifies a table row within a table <TH> ... </TH> - defines a table header cell <TD> ... </TD> -defines a table data cell Web Page Development <TABLE BORDER> <TR> <TD>Country</TD> <TD>Capital</TD> </TR> <TR> <TD>Malaysia</TD> <TD>Kuala Lumpur</TD> </TR> <TR> <TD>China</TD> <TD>Beijing</TD> </TR> </TABLE> Table – example Output: Country Capital Malaysia Kuala Lumpur China Beijing Web Page Development • Tables – more properties – – – – – BORDER = X - add borders to the table WIDTH=x, HEIGHT=x, - control the size of the table ALIGN=left or center or right - align a table/data to the left,center or right CELLSPACING-the width of the spacing between cell and along edges of cells. CELLPADDING-amount of space inserted btw cell content and the inner edge of a cell Web Page Development • – Themes Unified set of design elements and color schemes that you can apply to a page to give it a consistent and attractive appearance • • • • • Background Fonts Banners Bullets Link buttons Web Page Development – – – Using a theme is a quick and easy way to make sure your Web pages are visually consistent and appealing. Microsoft FrontPage includes many complete themes that you can use right away. You can also change those themes or create new ones Web Page Development – Themes – e.g.