1 / 22

Session 1

Session 1. Starting HTML. For this lecture. You need to take notes for later. This Session. What is HTML? Why is it important? How do we create it? How do we view it?. What is HTML. HTML is a markup language HTML defines how text should appear

walter-trevino
Download Presentation

Session 1

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. Session 1 Starting HTML Phil Campbell, London South Bank University

  2. For this lecture. . . You need to take notes for later. . . . Phil Campbell, London South Bank University

  3. 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

  4. 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

  5. Displayed as This issometext What is a markup language This is some text (normal text) <B>This is</B><I>some</I><U>text</U> Phil Campbell, London South Bank University

  6. Start Tag End Tag Displayed as This issometext What is a markup language <B>This is</B><I>some</I><U>text</U> Phil Campbell, London South Bank University

  7. HTML structure <HTML> </HTML> <HEAD> </HEAD> <BODY> </BODY> <B>This</B> is <I>some</I> <U>text</U> Phil Campbell, London South Bank University

  8. 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

  9. View HTML Open your browser Open the file you saved earlier. It should appear rendered as suggested by the tags Phil Campbell, London South Bank University

  10. Attributes <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> Phil Campbell, London South Bank University

  11. SIZE=3 COLOR=blue FACE=Arial FACE=Courier SIZE=+2 COLOR=red <FONT> Phil Campbell, London South Bank University

  12. Headings Phil Campbell, London South Bank University

  13. Tags Words Attributes Tag Attribute Start Tag End Tag Render Browser Notepad FONT: COLOR SIZE FACE <HTML> <HEAD> <BODY> <FONT> <U> <I> <B> <H1>...<H6> <HR> <BR> Phil Campbell, London South Bank University

  14. 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

  15. 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

  16. Phil Campbell, London South Bank University

  17. Green and Size = 5 Header bold Underline paragraph New line Font size 3 FACE = “courier” Horizontal Rule italic Exercise 1 Write down HTML for the display shown here Phil Campbell, London South Bank University

  18. 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>Inusing<FONT FACE="courier">HTML </FONT></P> </BODY> </HTML> Phil Campbell, London South Bank University

  19. Exercise 1 Phil Campbell, London South Bank University

  20. BGCOLOR = "linen" H1 Size 7,6,5,4 Ordered list Speak for themselves } centered paragraph underline Exercise 2 Phil Campbell, London South Bank University

  21. 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

  22. Phil Campbell, London South Bank University

More Related