phil campbell, london south bank university session 1 starting html
Post on 19-Dec-2015
217 views
TRANSCRIPT
Phil Campbell, London South Bank University
Session 1
Starting HTML
Phil Campbell, London South Bank University
For this lecture. . .
You need to take notes for later. . . .
Phil Campbell, London South Bank University
This Session
• What is HTML?
• Why is it important?
• How do we create it?
• How do we view it?
Phil Campbell, London South Bank University
What is HTML
• HTML is a markup language
• HTML defines how text should appear
• HTML allows links between documents
(possibly in different locations)
• HTML stands for HyperText Markup
Language
Phil Campbell, London South Bank University
What is a markup language
This is some text (normal text)
<B>This is</B> <I>some</I> <U>text</U>
This is some text
Displayed as
Phil Campbell, London South Bank University
What is a markup language
<B>This is</B> <I>some</I> <U>text</U>
This is some text
Displayed as
Start Tag End Tag
Phil Campbell, London South Bank University
HTML structure<HTML>
</HTML>
<B>This</B> is<I>some</I> <U>text</U>
<HEAD></HEAD><BODY>
</BODY>
Phil Campbell, London South Bank University
Entering HTML
Open Notepad and type in your HTML.
Save the file giving it a name with the extension HTML
Beware of getting the wrong extension
Phil Campbell, London South Bank University
View HTMLOpen your browser
Open the file you saved earlier.
It should appear rendered as suggested by the tags
Phil Campbell, London South Bank University
<FONT>deprecated
<HTML><HEAD></HEAD><BODY> <FONT SIZE="+2">This is</FONT> <FONT COLOR="red">some</FONT> <FONT FACE="Courier New">Text</FONT> <FONT SIZE=3 COLOR="blue" FACE="Arial"> - - - More Text </FONT> <BODY><HTML>
Attributes
Phil Campbell, London South Bank University
<FONT>SIZE=+2COLOR=redFACE=Courier
SIZE=3COLOR=blueFACE=Arial
Phil Campbell, London South Bank University
Headings
Phil Campbell, London South Bank University
Words
TagAttributeStart TagEnd TagRenderBrowserNotepad
AttributesFONT: COLOR
SIZE FACE
<HTML> <HEAD> <BODY><FONT><U> <I> <B> <H1>...<H6><HR> <BR>
Tags
Phil Campbell, London South Bank University
Lists
. . .<OL> <LI> Grape </LI> <LI> Orange </LI> <LI> Apple </LI></OL><HR><UL> <LI> Grape </LI> <LI> Orange </LI> <LI> Apple </LI></UL>
Phil Campbell, London South Bank University
Lists
. . .<OL> <LI TYPE ="a" Value = "3"> Grape </LI> <LI TYPE ="I"> Orange </LI> <LI TYPE ="A"> Apple </LI></OL><HR><UL> <LI TYPE="square"> Grape </LI> <LI TYPE="circle"> Orange </LI> <LI TYPE="disc"> Apple </LI></UL>
Phil Campbell, London South Bank University
Phil Campbell, London South Bank University
Exercise 1
Write down HTML for the display shown here
HeaderGreen and Size = 5boldNew lineitalic
Horizontal RuleFont size 3paragraphFACE = “courier”Underline
Phil Campbell, London South Bank University
Answer to Exercise 1
<HTML><HEAD></HEAD><BODY><H1>Exercise 1</H1><FONT SIZE="5" COLOR="green">T</FONT>his <B>is</B><BR> <I>a</I> <U>fi</U>rst<HR> <FONT SIZE="3">Exercise</FONT><P>In using <FONT FACE="courier">HTML</FONT></P> </BODY></HTML>
Phil Campbell, London South Bank University
Exercise 1
Phil Campbell, London South Bank University
Exercise 2BGCOLOR = "linen"
H1Size 7,6,5,4
underline
Ordered list
centered paragraph
Speak for themselves
}
Phil Campbell, London South Bank University
Exercise 2<HTML> <HEAD><TITLE> Example 2</TITLE></HEAD> <BODY BGCOLOR="linen"> <H1>Exercise 2</H1> <P ALIGN="center"><FONT size="7">T</FONT><FONT size="6">h</FONT><FONT size="5">i</FONT><FONT size="4">s</FONT>is ex<U>erc</U>ise 2</P> <OL> <LI><FONT COLOR="green">Green</FONT></LI> <LI><BIG>BIG</BIG></LI> <LI><I>Italic</I></LI> <LI><CODE>code</CODE></LI> </OL> </BODY></HTML>
Phil Campbell, London South Bank University