comm 1213 h1 comp 4923 x1
DESCRIPTION
COMM 1213 H1 COMP 4923 X1. HTML Basics (Readings: Ch. 3 & 4 of C.D.Knuckles). Outline. What is HTML? Creating and viewing HTML pages Basic syntax of HTML Basics of cascading style sheets. EG. What is HTML?. HyperText Markup Language language used to represent webpages - PowerPoint PPT PresentationTRANSCRIPT
11
COMM 1213 H1COMM 1213 H1COMP 4923 X1COMP 4923 X1
HTML BasicsHTML Basics
(Readings: Ch. 3 & 4 of C.D.Knuckles)(Readings: Ch. 3 & 4 of C.D.Knuckles)
22
OutlineOutline
• What is HTML? What is HTML?
• Creating and viewing HTML pagesCreating and viewing HTML pages
• Basic syntax of HTMLBasic syntax of HTML
• Basics of cascading style sheetsBasics of cascading style sheets
EG
33
What is HTML?What is HTML?
•HyperText Markup LanguageHyperText Markup Language – language used to represent webpageslanguage used to represent webpages
• Markers call “tags” are used to specify Markers call “tags” are used to specify how elements of page should be displayedhow elements of page should be displayed
<b>Hello World!</b><b>Hello World!</b>
• Fixed vocabulary of tagsFixed vocabulary of tags• Describes the structure of a document not Describes the structure of a document not
its specific layout its specific layout (layout may change size of (layout may change size of window and size of font)window and size of font)
44
Creating HTMLCreating HTML
• HTML files end with either .html HTML files end with either .html or .htmor .htm
• Can be created byCan be created by– A text editor (Wordpad, Notepad, vi)A text editor (Wordpad, Notepad, vi)– A Webpage editor (MS Frontpage, A Webpage editor (MS Frontpage,
Macromedia DreamWeaver)Macromedia DreamWeaver)– A translation from another document A translation from another document
format (MS Word to HTML)format (MS Word to HTML)
55
The simple.html webpageThe simple.html webpage
<HTML><HTML><HEAD><HEAD>
<TITLE> Hello World! </TITLE><TITLE> Hello World! </TITLE></HEAD></HEAD><BODY><BODY>This is a very simple web page. But, at This is a very simple web page. But, at least it says something and has a title!least it says something and has a title!</BODY></BODY>
</HTML></HTML>
66
Viewing HTML sourceViewing HTML source
• Most browsers allow you to view the Most browsers allow you to view the source HTML of a webpagesource HTML of a webpage
• MS Internet Explorer:MS Internet Explorer:– Select the “View” menuSelect the “View” menu– Select “Source”Select “Source”
• Note:Note:– Space in an HTML file is not displayed verbatim Space in an HTML file is not displayed verbatim
in the browserin the browser– HTML tags are not case sensitiveHTML tags are not case sensitive
77
Basic Syntax of HTMLBasic Syntax of HTML
• Tags and container Tags and container elementselements
• CommentsComments
• Formatting Text Formatting Text
• ColorColor
• HeadersHeaders
• Page attributesPage attributes
• Cascading Style SheetsCascading Style Sheets
88
Tags and ElementsTags and Elements
• <BODY> is a start tag<BODY> is a start tag
• </BODY> is an end tag</BODY> is an end tag
• <BODY> … </BODY> is a container <BODY> … </BODY> is a container element, or just elementelement, or just element
• Container elements must be properly Container elements must be properly nestednested
99
Put comments in your Put comments in your HTML!HTML!
General:General:
<!-- comment -- ><!-- comment -- >
Examples:Examples:
<!-- This is a comment -- ><!-- This is a comment -- >
<!-- <title>My First Page</title> -- ><!-- <title>My First Page</title> -- >
1010
Formatting Text Formatting Text
<b> bold </b> <b> bold </b> boldbold<i> italics </i><i> italics </i> iitalicstalics
<tt> typewriter </tt><tt> typewriter </tt> ttypewriterypewriter
HTML elements can have attributes:HTML elements can have attributes:Deprecated:Deprecated:<font color=red size=20><font color=red size=20>Combining color and sizeCombining color and size</font> </font>
1111
Formatting Text - FontsFormatting Text - Fonts TypesTypes
Deprecated:Deprecated: VerdanaVerdana
<font size=+2 face="Verdana">Verdana</font><font size=+2 face="Verdana">Verdana</font>ArialArial
<font size=+2 face="Arial">Arial</font><font size=+2 face="Arial">Arial</font>HelveticaHelvetica
<font size=+2 face="Helvetica">Helvetica</font><font size=+2 face="Helvetica">Helvetica</font>ImpactImpact
<font size=+2 face="Impact">Impact</font><font size=+2 face="Impact">Impact</font>Comic Sans MSComic Sans MS
<font size=+2 face="Comic Sans MS">Comic Sans<font size=+2 face="Comic Sans MS">Comic Sans MS</font>MS</font>
1212
Formatting Text - Formatting Text - PositioningPositioning• Paragraph: Paragraph: <p> … </p><p> … </p>
<p>This is a new paragraph.</p><p>This is a new paragraph.</p>
• Line break: Line break: <br><br>
We would prefer the following: <br>We would prefer the following: <br>
• Horizontal rule lines: <hr>Horizontal rule lines: <hr>
Top line of text <hr> bottom line of textTop line of text <hr> bottom line of text
• Deprecated Deprecated Centering:Centering: <center> … </center><center> … </center>
<center><b>I am boldly <center><b>I am boldly centered</b></center>centered</b></center>
1313
Formatting - HFormatting - Horizontal ruleorizontal rule
Other examples of horizontal rule lines using Other examples of horizontal rule lines using its attributes (width, size and align)... its attributes (width, size and align)...
• <hr width=50> [number of pixels]<hr width=50> [number of pixels]
• <hr width=50%><hr width=50%>
• <hr size=7> <hr size=7>
• <hr align=left> [left,right,center,justify]<hr align=left> [left,right,center,justify]
• <hr noshade><hr noshade>
• <hr width=50% size=15 align=left <hr width=50% size=15 align=left noshade>noshade>
1414
Preformated Text and Preformated Text and QuotesQuotes• VerbatimVerbatim: : <pre> … </pre><pre> … </pre>
<pre> <pre> This will appear . . . exactly … as seen here. This will appear . . . exactly … as seen here. </pre></pre>
• Quote:Quote: <blockquote> … </blockquote><blockquote> … </blockquote><blockquote> <blockquote> To be or not to be, that is the question —To be or not to be, that is the question —Whether 'tis nobler in the mind to sufferWhether 'tis nobler in the mind to sufferThe slings and arrows of outrageous fortune,The slings and arrows of outrageous fortune,Or to take arms against a sea of troubles,Or to take arms against a sea of troubles,And by opposing, end them. And by opposing, end them. </blockquote></blockquote>
1515
Header ElementsHeader Elements<HTML><HTML><HEAD><TITLE>Header Size Tags</TITLE></HEAD><HEAD><TITLE>Header Size Tags</TITLE></HEAD><BODY><BODY> <FONT FACE="Arial, Helvetica"><FONT FACE="Arial, Helvetica"> <H1> This is size H1 </H1><BR><H1> This is size H1 </H1><BR> <H2> This is size H2 </H2><BR><H2> This is size H2 </H2><BR> <H3> This is size H3 </H3><BR><H3> This is size H3 </H3><BR> <H4> This is size H4 </H4><BR><H4> This is size H4 </H4><BR> </FONT></FONT></BODY></BODY></HTML></HTML>
1616
Page AttributesPage Attributes
• TitleTitle<title>World Wide Web Consortium</title><title>World Wide Web Consortium</title>
• Background colorBackground color<body bgcolor=“green"> <body bgcolor=“green">
… … <</body/body> >
• Meta tags Meta tags <meta name="description" content="description of page goes
here">
<meta name="keywords" content="keywords go here">
1717
Meta TagsMeta Tags
<html>
<head><title>Little Joe's Sound Page</title><meta name="description" content="Joe's Collection of Cool Sound files for you to use in your home page!"><meta name="keywords" content="music sounds midi wav joe collection"></head>
<body>Page Goes Here</body>
</html>
1818
HTML and ColorsHTML and Colors• By Color Name By Color Name <BODY BGCOLOR=“blue”>
– bblacklack, , redred, , whitewhite, , yellowyellow, , tantan, , blueblue, , navynavy, , greengreen, , magentamagenta, , brownbrown, , turquoise turquoise
• By Pigment MixBy Pigment Mix <BODY BGCOLOR=“#0000ff”>– ##RRRRGGGGBBBB – RRRR, is the amount of red in the colour (00 is none and FF , is the amount of red in the colour (00 is none and FF
is a lot) is a lot) – GGGG is the amount of green is the amount of green – BBBB is the amount of blue is the amount of blue – <BODY BGCOLOR= '#00ff00'> is very is very greengreen – <BODY BGCOLOR= '#880088'> is is purplepurple– 2^48 possible colors2^48 possible colors– only 216 are “only 216 are “browser safebrowser safe” or “” or “web safeweb safe””– Also colors assigned for LINK, ALINK and VLINK (later)Also colors assigned for LINK, ALINK and VLINK (later)
Ref: Ref: http://websitetips.com/color/tools/#chartshttp://websitetips.com/color/tools/#charts
1919
Let’s Recap and Summarize Let’s Recap and Summarize ……• In general an HTML element: In general an HTML element:
– May or may be a containerMay or may be a container– May or may not have attributesMay or may not have attributes
• Attributes may or may not have valuesAttributes may or may not have values– Values can always be surrounded by quotesValues can always be surrounded by quotes
• The order of attributes does not matterThe order of attributes does not matter
2020
DeprecatedDeprecated HTML Elements HTML Elements
• Elements such as <center> and Elements such as <center> and <underline> no longer supported by <underline> no longer supported by many browsersmany browsers
• Should be avoidedShould be avoided• To test your HTML use the W3C To test your HTML use the W3C
Markup Validation Service at Markup Validation Service at http://validator.w3.org/ http://validator.w3.org/
2121
Example: Karen’s Lunch Example: Karen’s Lunch MenuMenu<HTML><HEAD><TITLE>Karen's Lunch Menu</TITLE></HEAD><BODY BGCOLOR="#CC99CC"><P ALIGN=center><FONT SIZE="+2" FACE="BlackForest" COLOR="#003399">Karen's Sandwich Shoppe</FONT></P><HR><FONT SIZE="+1" COLOR="#003399">Daily Special:</FONT> Liverwurst with salami and mushrooms on rye.</FONT><BR><P ALIGN=right> <FONT COLOR="#003399">Regular:</FONT> $3.99<BR><FONT COLOR="#003399">Triple Decker:</FONT> $5.99</P><HR><FONT SIZE="+1" COLOR="#003399">The SCOOBY:</FONT> Ham and sardines on wheat with extra pickles and artichokes.<BR><P ALIGN=right> <FONT COLOR="#003399">Regular:</FONT> $4.99<BR><FONT COLOR="#003399">Triple Decker:</FONT> $6.99</P><FONT SIZE="+1" COLOR="#003399">The SHAGGY:</FONT> Pastrami on white topped with hot fudge and spinach.<BR><P ALIGN=right> <FONT COLOR="#003399">Regular:</FONT> $4.99<BR><FONT COLOR="#003399">Triple Decker:</FONT> $6.99</P></BODY></HTML>
2222
Cascading Style Sheets Cascading Style Sheets BasicsBasics• CSS is included in the HEAD section:CSS is included in the HEAD section:<HEAD> <STYLE><!-- …. --></STYLE> </HEAD><HEAD> <STYLE><!-- …. --></STYLE> </HEAD> Style rules go hereStyle rules go here
• Example - Example - Define SPAN as an HTML container element Define SPAN as an HTML container element with a special style class called bigblue: with a special style class called bigblue: <STYLE><!--<STYLE><!--
SPAN.bigblue {color:blue ; font-size:16pt}SPAN.bigblue {color:blue ; font-size:16pt}--></STYLE>--></STYLE>
• Use the classUse the class<SPAN CLASS="bigblue">large blue at the end.</SPAN><SPAN CLASS="bigblue">large blue at the end.</SPAN>
2323
Example: simpstyle.htmlExample: simpstyle.html<HTML><HEAD><TITLE>Styles For Text</TITLE>
<STYLE><!--SPAN.cool {color:teal ; font-family:BlackForest}SPAN.bigblue {color:blue ; font-size:16pt}SPAN.smallred {color:red ; font-size:8pt ; font-family:courier}--></STYLE>
</HEAD>
<BODY>
I am merely some normal, default text.<SPAN CLASS="smallred">On the other hand, I am some diminutive red courier text.</SPAN>I am a normal sentence with some <SPAN CLASS="bigblue">large blue at the end.</SPAN><SPAN CLASS="cool">Clearly, I'm the coolest of them all.</SPAN>
</BODY></HTML>
2424
Style Class Definitions Style Class Definitions
• TAG.CLas {property1:value1 ; property2:value2 ; ….}TAG.CLas {property1:value1 ; property2:value2 ; ….}
• Common properties and value are give on page 78Common properties and value are give on page 78
• Also see:Also see:
http://simplythebest.net/info/design/css_properties.hthttp://simplythebest.net/info/design/css_properties.htmlml
• Every HTML element has a CLASS element:Every HTML element has a CLASS element:<STYLE><!--<STYLE><!--
H1.centered {text-align:center}H1.centered {text-align:center}
--></STYLE>--></STYLE>• Use:Use: <H1 CLASS=“centered”> I am a centered header </H1> <H1 CLASS=“centered”> I am a centered header </H1>
2525
Karen’s Lunch Menu – lots of Karen’s Lunch Menu – lots of codecode<HTML><HEAD><TITLE>Karen's Lunch Menu</TITLE></HEAD><BODY BGCOLOR="#CC99CC"><P ALIGN=center><FONT SIZE="+2" FACE="BlackForest" COLOR="#003399">Karen's Sandwich Shoppe</FONT></P><HR><FONT SIZE="+1" COLOR="#003399">Daily Special:</FONT> Liverwurst with salami and mushrooms on rye.</FONT><BR><P ALIGN=right> <FONT COLOR="#003399">Regular:</FONT> $3.99<BR><FONT COLOR="#003399">Triple Decker:</FONT> $5.99</P><HR><FONT SIZE="+1" COLOR="#003399">The SCOOBY:</FONT> Ham and sardines on wheat with extra pickles and artichokes.<BR><P ALIGN=right> <FONT COLOR="#003399">Regular:</FONT> $4.99<BR><FONT COLOR="#003399">Triple Decker:</FONT> $6.99</P><FONT SIZE="+1" COLOR="#003399">The SHAGGY:</FONT> Pastrami on white topped with hot fudge and spinach.<BR><P ALIGN=right> <FONT COLOR="#003399">Regular:</FONT> $4.99<BR><FONT COLOR="#003399">Triple Decker:</FONT> $6.99</P></BODY></HTML>
2626
Karen’s Lunch Menu – with Karen’s Lunch Menu – with CSSCSS<HTML>
<HEAD><TITLE>Karen's Lunch Menu</TITLE>
<LINK REL="STYLESHEET" HREF="menustyles.css" TYPE="text/css">
</HEAD><BODY BGCOLOR="#CC99CC">
<H1 CLASS="fancy">Karen's Sandwich Shoppe</H1><HR><SPAN CLASS="san">Daily Special:</SPAN> Liverwurst with salami and mushrooms on rye.<BR><P CLASS="right"><SPAN CLASS="var">Regular:</SPAN> $3.99<BR><SPAN CLASS="var">Triple Decker:</SPAN> $5.99</P><HR><SPAN CLASS="san">The SCOOBY:</SPAN> Ham and sardines on wheat with extra pickles and artichokes.<BR><P CLASS="right"><SPAN CLASS="var">Regular:</SPAN> $3.99<BR><SPAN CLASS="var">Triple Decker:</SPAN> $5.99</P><SPAN CLASS="san">The SHAGGY:</SPAN> Pastrami on white topped with hot fudge and spinach.<BR><P CLASS="right"><SPAN CLASS="var">Regular:</SPAN> $3.99<BR><SPAN CLASS="var">Triple Decker:</SPAN> $5.99</P>
</BODY></HTML>
2727
Example: Karen’s Lunch Example: Karen’s Lunch MenuMenu
H1.fancy {color:#003399 ; text-align:center ; font-family:BlackForest }P.right {text-align:right ; margin-top:0 ; margin-bottom:0 }SPAN.san {color:#003399 ; font-size:16pt }SPAN.var {color:#003399 ; font-size:14pt }
menustyles.css :menustyles.css :
2828
ResourcesResources• Getting started with HTML Getting started with HTML from the W3C from the W3C
• W3C'sW3C's Recommendation for Recommendation for HTML 4.0HTML 4.0 is the is the authoritative specification for HTML authoritative specification for HTML
• W3 Schools W3 Schools HTML TutorialHTML Tutorial
• HTML Goodies HTML Goodies HTML PrimerHTML Primer
• An An HTML Code Tutorial HTML Code Tutorial
• Writing HTMLWriting HTML a tutorial for creating web a tutorial for creating web pages (a little old but a different pages (a little old but a different perspective) perspective)
3030
Why Do They Call ThemWhy Do They Call Them "Cascading"?"Cascading"? • "cascading" applies to a hierarchy of "cascading" applies to a hierarchy of
importanceimportance
• Levels:Levels:– Styles of user-selected style sheetStyles of user-selected style sheet– Styles of individual tagsStyles of individual tags– Styles specified within the <head> of a single pageStyles specified within the <head> of a single page– Styles specified in external documents. Styles specified in external documents.
• You could say that the style specified most You could say that the style specified most recently is the one that is appliedrecently is the one that is applied
3131
Architectural of the InternetArchitectural of the Internet
InternetInternet
Application
Client 1
Server BServer C
TCP/IP
Application
Client 2
Server X
Server Y
Server C
Intranet
Intranet
Acadia
3232
TCP/IP Protocol ArchitectureTCP/IP Protocol Architecture
Transmission Control Protocol
Internet Protocol
3333
TCP/IP Protocol ArchitectureTCP/IP Protocol Architecture
• Internet Protocol (IP) – like a postcard Internet Protocol (IP) – like a postcard that contains:that contains:– Destination address (131.162.201.7)Destination address (131.162.201.7)– Return addressReturn address– Block of data (content)Block of data (content)
• Transmission Control Protocol (TCP)Transmission Control Protocol (TCP)– Ensures the post card gets throughEnsures the post card gets through– Ensures the order of deliverEnsures the order of deliver– Handles errors and control flowHandles errors and control flow
3434
Client-Server Applications Client-Server Applications that use the Internetthat use the Internet
Physical
Network
TCP
IP
Physical
Network
TCP
IPInternetInternet
Telnet Window Telnet Server
FTP Client FTP Server
eMail Client eMail ServerSMTP/POP
FTP
Telnet Protocol
3535
Major Architectural Major Architectural Components of the WebComponents of the Web
InternetInternet
Browser
DatabaseServer
Client 1
Server A
Server BServer C
URL
HTTPTCP/IP
Browser
Client 2 HTTPServer
App.Server
index.html
3636
A Basic HTML DocumentA Basic HTML Document<HTML>
<HEAD><TITLE>First Page</TITLE></HEAD>
<BODY BGCOLOR= '#0000ff'>
<!-- <BODY BGCOLOR= '#ff0000'> -->
<FONT FACE="Arial, Helvetica" COLOR='#FFFFFF'>
<CENTER>
I'm quite hyper - even the language I speak is Hyper-Text-Markup-Language <B> - Vivek</B>
</CENTER>
</FONT>
</BODY>
</HTML>