introduction to html n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Introduction to HTML PowerPoint Presentation
Download Presentation
Introduction to HTML

Loading in 2 Seconds...

play fullscreen
1 / 40

Introduction to HTML - PowerPoint PPT Presentation


  • 43 Views
  • Uploaded on

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.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
introduction to html

Introduction to HTML

Bent Thomsen

Institut for Datalogi

Aalborg Universitet

world wide web
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

document viewing netscape
Document viewing Netscape

Bent Thomsen FIT - 2-2

other browsers
Other browsers

Bent Thomsen FIT - 2-2

browser and server communication
Browser and Server communication

http request

(path and parameters)

HTTP answer

(HTML code)

Bent Thomsen FIT - 2-2

h yper t ext m arkup l anguage
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

html formatting
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

a first example
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

why are we interested in html code
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

html syntax
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

head command
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

body command
Body Command
  • After <html><head></head> command
  • <body> and </body>
  • Before </html>

Bent Thomsen FIT - 2-2

text formatting
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

headings
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

emphasis
Emphasis
  • Bold <B> </B>
  • <STRONG> </STRONG>
  • Italics <I> </I>
  • <EM> </EM>

Bent Thomsen FIT - 2-2

text size
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

more text size
More text size
  • <BIG> … </BIG>
  • <SMALL> … </SMALL>
  • <SUB> subscript </SUB>

Bent Thomsen FIT - 2-2

fonts
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

other formatting
Other formatting
  • Changing Colours
    • <font color=“#000000”>
  • Blinking text
    • <blink> </blink>

Bent Thomsen FIT - 2-2

special characters
Special characters

Bent Thomsen FIT - 2-2

lists
Lists
  • Numbered lists <OL> … </OL> and <LI>

<OL>

<LI> Bla

<LI> Bla Bla

<LI> More Bla Bla

</OL>

Bent Thomsen FIT - 2-2

more lists
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

and more lists
And more lists
  • Unnumbered lists <UL> … </UL>

<UL>

<LI> Bla

<LI> Bla Bla

<LI> More Bla Bla

</UL>

Bent Thomsen FIT - 2-2

list in lists
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

definition lists
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

tables
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

table example
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

hyperlinks
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

internal links
Internal links
  • <A HREF=“#intro”> </A>
    • Notice the #
  • <A NAME=“intro”> </A>

Bent Thomsen FIT - 2-2

images
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

forms
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

the result
The result

Bent Thomsen FIT - 2-2

more stuff to put in forms
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

rounding off pages
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

steps to create a web page
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

design for your target audience
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

top ten mistakes
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

opgaver og kursusmateriale
Opgaver og kursusmateriale

http://www.cs.auc.dk/~bt/FITE03/index.htm

Bent Thomsen FIT - 2-2

slide40

Happy Webbing

Bent Thomsen FIT - 2-2