COMM 1213 H1 COMP 4923 X1

COMM 1213 H1COMP 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 • Markers call “tags” are used to specify how elements of page should be displayed Hello World! • Fixed vocabulary of tags • Describes the structure of a document not its specific layout (layout may change size of window and size of font)

Creating HTML • HTML files end with either .html or .htm • Can be created by • A text editor (Wordpad, Notepad, vi) • A Webpage editor (MS Frontpage, Macromedia DreamWeaver) • A translation from another document format (MS Word to HTML)

The simple.html webpage <HTML> <HEAD> <TITLE> Hello World! </TITLE> </HEAD> <BODY> This is a very simple web page. But, at least it says something and has a title! </BODY> </HTML>

Viewing HTML source • Most browsers allow you to view the source HTML of a webpage • MS Internet Explorer: • Select the “View” menu • Select “Source” • Note: • Space in an HTML file is not displayed verbatim in the browser • HTML tags are not case sensitive

Basic Syntax of HTML • Tags and container elements • Comments • Formatting Text • Color • Headers • Page attributes • Cascading Style Sheets

Tags and Elements • <BODY> is a start tag • </BODY> is an end tag • <BODY> … </BODY> is a container element, or just element • Container elements must be properly nested

Put comments in your HTML! General: <!-- comment -- > Examples: <!-- This is a comment -- > <!-- <title>My First Page</title> -- >

Formatting Text bold bold italics italics <tt> typewriter </tt> typewriter HTML elements can have attributes: Deprecated: Combining color and size

Formatting Text - Fonts Types Deprecated: VerdanaVerdana Arial Arial HelveticaHelvetica ImpactImpact Comic Sans MSComic SansMS

Formatting Text - Positioning • Paragraph: … This is a new paragraph. • Line break: We would prefer the following: • Horizontal rule lines: <hr> Top line of text <hr> bottom line of text • Deprecated Centering: <center> … </center> <center>I am boldly centered</center>

Formatting - Horizontal rule Other examples of horizontal rule lines using its attributes (width, size and align)... • <hr width=50> [number of pixels] • <hr width=50%> • <hr size=7> • <hr align=left> [left,right,center,justify] • <hr noshade> • <hr width=50% size=15 align=left noshade>

Preformated Text and Quotes • Verbatim: <pre> … </pre> <pre> This will appear . . . exactly … as seen here. </pre> • Quote: <blockquote> … </blockquote> <blockquote> To be or not to be, that is the question — Whether 'tis nobler in the mind to suffer The slings and arrows of outrageous fortune, Or to take arms against a sea of troubles, And by opposing, end them. </blockquote>

Header Elements <HTML> <HEAD><TITLE>Header Size Tags</TITLE></HEAD> <BODY> <H1> This is size H1 </H1> <H2> This is size H2 </H2> <H3> This is size H3 </H3> <H4> This is size H4 </H4> </BODY> </HTML>

Page Attributes • Title <title>World Wide Web Consortium</title> • Background color <body bgcolor=“green"> … </body> • Meta tags <meta name="description" content="description of page goes here"> <meta name="keywords" content="keywords go here">

<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> Meta Tags

HTML and Colors • By Color Name <BODY BGCOLOR=“blue”> • black, red, white, yellow, tan, blue, navy, green, magenta, brown, turquoise • By Pigment Mix<BODY BGCOLOR=“#0000ff”> • #RRGGBB • RR, is the amount of red in the colour (00 is none and FF is a lot) • GG is the amount of green • BB is the amount of blue • <BODY BGCOLOR= '#00ff00'> is very green • <BODY BGCOLOR= '#880088'> is purple • 2^48 possible colors • only 216 are “browser safe” or “web safe” • Also colors assigned for LINK, ALINK and VLINK (later) Ref: http://websitetips.com/color/tools/#charts

Let’s Recap and Summarize … • In general an HTML element: • May or may be a container • May or may not have attributes • Attributes may or may not have values • Values can always be surrounded by quotes • The order of attributes does not matter

Deprecated HTML Elements • Elements such as <center> and <underline> no longer supported by many browsers • Should be avoided • To test your HTML use the W3C Markup Validation Service at http://validator.w3.org/

Example: Karen’s Lunch Menu <HTML> <HEAD> <TITLE>Karen's Lunch Menu</TITLE> </HEAD> <BODY BGCOLOR="#CC99CC"> Karen's Sandwich Shoppe <HR> Daily Special: Liverwurst with salami and mushrooms on rye. Regular: $3.99 Triple Decker: $5.99 <HR> The SCOOBY: Ham and sardines on wheat with extra pickles and artichokes. Regular: $4.99 Triple Decker: $6.99 The SHAGGY: Pastrami on white topped with hot fudge and spinach. Regular: $4.99 Triple Decker: $6.99 </BODY> </HTML>

Cascading Style Sheets Basics • CSS is included in the HEAD section: <HEAD> <STYLE></STYLE> </HEAD> Style rules go here • Example - Define SPAN as an HTML container element with a special style class called bigblue: <STYLE></STYLE> • Use the class large blue at the end.

Example: simpstyle.html <HTML> <HEAD> <TITLE>Styles For Text</TITLE> <STYLE></STYLE> </HEAD> <BODY> I am merely some normal, default text. On the other hand, I am some diminutive red courier text. I am a normal sentence with some large blue at the end. Clearly, I'm the coolest of them all. </BODY> </HTML>

Style Class Definitions • TAG.CLas {property1:value1 ; property2:value2 ; ….} • Common properties and value are give on page 78 • Also see: http://simplythebest.net/info/design/css_properties.html • Every HTML element has a CLASS element:<STYLE></STYLE> • Use: <H1 CLASS=“centered”> I am a centered header </H1>

Karen’s Lunch Menu – lots of code <HTML> <HEAD> <TITLE>Karen's Lunch Menu</TITLE> </HEAD> <BODY BGCOLOR="#CC99CC"> Karen's Sandwich Shoppe <HR> Daily Special: Liverwurst with salami and mushrooms on rye. Regular: $3.99 Triple Decker: $5.99 <HR> The SCOOBY: Ham and sardines on wheat with extra pickles and artichokes. Regular: $4.99 Triple Decker: $6.99 The SHAGGY: Pastrami on white topped with hot fudge and spinach. Regular: $4.99 Triple Decker: $6.99 </BODY> </HTML>

Karen’s Lunch Menu – with CSS <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> Daily Special: Liverwurst with salami and mushrooms on rye. Regular: $3.99 Triple Decker: $5.99 <HR> The SCOOBY: Ham and sardines on wheat with extra pickles and artichokes. Regular: $3.99 Triple Decker: $5.99 The SHAGGY: Pastrami on white topped with hot fudge and spinach. Regular: $3.99 Triple Decker: $5.99 </BODY> </HTML>

Example: Karen’s Lunch Menu menustyles.css : 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 }

Resources • Getting started with HTML from the W3C • W3C's Recommendation for HTML 4.0 is the authoritative specification for HTML • W3 Schools HTML Tutorial • HTML Goodies HTML Primer • An HTML Code Tutorial • Writing HTML a tutorial for creating web pages (a little old but a different perspective)

THE ENDdanny.silver@acadiau.ca

Why Do They Call Them "Cascading"? • "cascading" applies to a hierarchy of importance • Levels: • Styles of user-selected style sheet • Styles of individual tags • Styles specified within the <head> of a single page • Styles specified in external documents. • You could say that the style specified most recently is the one that is applied

Architectural of the Internet Client 1 Acadia Server X Application TCP/IP Server Y Intranet Internet Client 2 Application Server C Server B Server C

TCP/IP Protocol Architecture Transmission Control Protocol Internet Protocol

TCP/IP Protocol Architecture • Internet Protocol (IP) – like a postcard that contains: • Destination address (131.162.201.7) • Return address • Block of data (content) • Transmission Control Protocol (TCP) • Ensures the post card gets through • Ensures the order of deliver • Handles errors and control flow

Client-Server Applications that use the Internet Telnet Protocol Telnet Window Telnet Server FTP FTP Server FTP Client SMTP/POP eMail Client eMail Server TCP TCP IP IP Internet Network Network Physical Physical

Major Architectural Components of the Web Client 1 Browser HTTP TCP/IP Server A HTTP Server App. Server Database Server Internet Client 2 Browser index.html URL Server B Server C

A Basic HTML Document <HTML> <HEAD><TITLE>First Page</TITLE></HEAD> <BODY BGCOLOR= '#0000ff'>  <CENTER> I'm quite hyper - even the language I speak is Hyper-Text-Markup-Language - Vivek </CENTER> </BODY> </HTML>

COMM 1213 H1 COMP 4923 X1