1 / 40

Introduction to HTML

Introduction to HTML. Bent Thomsen Institut for Datalogi Aalborg Universitet. World Wide Web. Distributed hypertext documents. Documents linked by Universal Resource Locators (URL) Example: http://www.but.auc.dk/ ~ bt/FIT/index.htm. Document viewing Microsoft Internet Explorer.

cirila
Download Presentation

Introduction to HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Introduction to HTML Bent Thomsen Institut for Datalogi Aalborg Universitet

  2. World Wide Web Distributed hypertext documents Documents linked by Universal Resource Locators (URL) Example: http://www.but.auc.dk/~bt/FIT/index.htm Bent Thomsen FIT - 2-2

  3. Document viewing Microsoft Internet Explorer Bent Thomsen FIT - 2-2

  4. Document viewing Netscape Bent Thomsen FIT - 2-2

  5. Other browsers Bent Thomsen FIT - 2-2

  6. Browser and Server communication http request (path and parameters) HTTP answer (HTML code) Bent Thomsen FIT - 2-2

  7. HyperTextMarkup Language • An HTML document is a plain text file • It contains text and other information to be displayed by a web browser • It also contains formatting tags • It can be created in a plain text editor • Or by a WYSIWYG tool • Or by a program running on a server Bent Thomsen FIT - 2-2

  8. HTML formatting • HTML documents contain text and formatting tags • Tags follow a simple rule: • <tag_name>string of text</tag_name> • E.g. • <h3>What are HTML tags?</h3> • I.e. like matching brackets • Except a few tags like • <p> and <br> • Note HTML tags are not case sensitive • <h3> and <H3> are the same Bent Thomsen FIT - 2-2

  9. A first example <html> <head> <TITLE>A Simple HTML Example</TITLE> </head> <body> <H1>HTML is Easy To Learn</H1> Welcome to the world of HTML. This is the first paragraph. While short, it is still a paragraph!<P> And this is the second paragraph. </body> </html> Bent Thomsen FIT - 2-2

  10. Why are we interested in HTML Code? • Because there are things that can not be done using WYSIWIG editors • To ensure that web pages look reasonable in all browsers • To learn from other peoples good ideas • To be able to do web programming and use forms • In web programming you write programs generating HTML • For that you need to understand HTML Bent Thomsen FIT - 2-2

  11. HTML Syntax • HTML has a small vocabulary • Getting the syntax wrong will not (or should not) crash your browser • Tags the browser doesn’t understand are ignored • <wiggle><h3>What are HTML tags?</h3></wiggle> • Several important versions of HTML • HTML 1.0, HTML 3.2 and HTML 4.0 Bent Thomsen FIT - 2-2

  12. Head Command • Tags <head> and </head> • Contains formatting and other instructions • Title <title> This is title</title> • Places title above the tool bar • Background images/colours • <body background=“picture.gif”> • Scripts Bent Thomsen FIT - 2-2

  13. Body Command • After <html><head></head> command • <body> and </body> • Before </html> Bent Thomsen FIT - 2-2

  14. Text formatting • Paragraphs • The <p> tag (and </p> ) • <p align=left> </p> • <p align=right> </p> • <p align=center> </p> • Line breaks • The <br> tag • Horisontal line <hr> • Preformatted text • <PRE> </PRE> Bent Thomsen FIT - 2-2

  15. Headings • <H1>Heading 1</H1> • <H2>Heading 2</H2> • <H3>Heading 3</H3> • Base text • <H4>Heading 4</H4> • <H5>Heading 5</H5> • <H6>Heading 6</H6> Bent Thomsen FIT - 2-2

  16. Emphasis • Bold <B> </B> • <STRONG> </STRONG> • Italics <I> </I> • <EM> </EM> Bent Thomsen FIT - 2-2

  17. Text Size • <FONT SIZE=7> </FONT> • <FONT SIZE=6> </FONT> • <FONT SIZE=5> </FONT> • … • <FONT SIZE=2> </FONT> • <FONT SIZE=1> </FONT> • <FONT SIZE=+4> </FONT> • <BODY><BASEFONT SIZE=4>…</BODY> Bent Thomsen FIT - 2-2

  18. More text size • <BIG> … </BIG> • <SMALL> … </SMALL> • <SUB> subscript </SUB> Bent Thomsen FIT - 2-2

  19. Fonts • <FONT FACE=“Arial”> </FONT> • Arial, Helvetica, Times, Courier, … • <TT> Tele Type </TT> • <U> Underscore </U> • <S> Line through </S> Bent Thomsen FIT - 2-2

  20. Other formatting • Changing Colours • <font color=“#000000”> • Blinking text • <blink> </blink> Bent Thomsen FIT - 2-2

  21. Special characters Bent Thomsen FIT - 2-2

  22. Lists • Numbered lists <OL> … </OL> and <LI> <OL> <LI> Bla <LI> Bla Bla <LI> More Bla Bla </OL> Bent Thomsen FIT - 2-2

  23. More lists • Attributed lists <OL TYPE=A>…</OL> <OL TYPE=A> <LI> Bla <LI> Bla Bla <LI> More Bla Bla </OL> Possible values for TYPE are 1, a, A, i and I Bent Thomsen FIT - 2-2

  24. And more lists • Unnumbered lists <UL> … </UL> <UL> <LI> Bla <LI> Bla Bla <LI> More Bla Bla </UL> Bent Thomsen FIT - 2-2

  25. List in lists <OL> <LI> Bla <LI> Bla Bla <UL> <LI> More Bla Bla in a sublist <LI> even more Bla Bla </UL> <LI> back to the first list </OL> Bent Thomsen FIT - 2-2

  26. Definition Lists • <DL> … <DL> , <DT> and <DD> <DL> <DT>First <DD> Bla <DT> Second <DD> Bla Bla <DT> Third <DD> More Bla Bla </DL> Bent Thomsen FIT - 2-2

  27. Tables • <TABLE> … </TABLE> • <TR> Starts a table row • <TH> Table heading (in bold) • <TD> Table cell • Table attributes • ALIGN, WIDTH, BORDER, BGCOLOR • CELLPADDING, CELLSPACING Bent Thomsen FIT - 2-2

  28. Table example <TABLE BORDER> <TR><TH>Department<TH>March<TH>June <TR><TH>Comp<TD>200<TD>250 <TR><TH>Eng<TD>400><TD>350 </TABLE> Bent Thomsen FIT - 2-2

  29. Hyperlinks • Relative vs. Absolute links • Relative links = relative to the location of the page • <a href=“page1.html”> • <a href=“../fit/page2.html”> • Absolute links tell exactly where the item is • <a href=http://www.cs.auc.dk/~bt/index.html> • Clickable links • < a href=“page1.html”>Link text</a> Bent Thomsen FIT - 2-2

  30. Internal links • <A HREF=“#intro”> </A> • Notice the # • <A NAME=“intro”> </A> Bent Thomsen FIT - 2-2

  31. Images • Types of images • .jpg or .gif or … • Tags • <img src=“bt.jpg”> • Setting image size • <img src=“bt.jpg” WIDTH=“32” HEIGHT=“32” BORDER=“0”> • Providing alternatives • <img src=“bt.jpg” ALT=“picture of Bent”> Bent Thomsen FIT - 2-2

  32. Forms <Form ACTION=mailto:bt@but.auc.dk METHOD=POST ENCTYPE=“text/plain”> <INPUT TYPE=RESET VALUE=“Start again”> <INPUT TYPE=SUBMIT VALUE=“Send this form”> <TEXTAREA NAME=comments ROWS=5 COLS=40>My comments are</TEXTAREA> </FORM> Bent Thomsen FIT - 2-2

  33. The result Bent Thomsen FIT - 2-2

  34. More stuff to put in forms • <INPUT TYPE=TEXT …> • <INPUT TYPE=TEXT NAME=surname> • A single line text box • <INPUT TYPE=PASSWORD …> • As text, but typing is not shown • <INPUT TYPE=CHECKBOX …> • Checkboxes, more than one can be selected • <INPUT TYPE=RADIO • Radio buttons, only one can be selected Bent Thomsen FIT - 2-2

  35. Rounding off pages • Return tags • In a collection of pages it is nice to be able to navigate easily • Mailto tags • <a href=mailto:bt@cs.auc.dk> Text or image </a> Bent Thomsen FIT - 2-2

  36. Steps to create a web page • Create HTML document(s) • Create folder on a server • Upload document(s) to folder • View page on the Internet Bent Thomsen FIT - 2-2

  37. Design for your target audience • Be sure of the purpose of your web site • Think about your target audience • What you write and how you write • Think about their connectivity • Think about possible browsers • Think about plug-ins if you use special contents • Provide alternative contents for images Bent Thomsen FIT - 2-2

  38. Top Ten Mistakes • Using Frames • Gratuitous use of Bleeding-Edge Technology • Scrolling text • Constantly animated pictures • Complex URLs • Long scrolling pages • Lack of navigational support • Non-standard link colours • Outdated information • Overly long download times Bent Thomsen FIT - 2-2

  39. Opgaver og kursusmateriale http://www.cs.auc.dk/~bt/FITE03/index.htm Bent Thomsen FIT - 2-2

  40. Happy Webbing Bent Thomsen FIT - 2-2

More Related