Slide 1
• Paul Fodor
• CSE316:
• Fundamentals of SoftwareDevelopment
• Stony Brook Univer sity
• http://www.cs.stonyb rook.edu/~cse316
• Web DevelopmentTechnologies:
• HTML and CSS
• 1
Slide 2
• (c ) PaulFodor(C SStonyBrook)
• Topics
• HTML
• CSS
• 2
Slide 3
• (c ) PaulFodor(C SStonyBrook)
• HTML
• Hyper textMarku p Lang uage
• Descr ibes str ucture of a web page
• Contains
• eleme nts
• Elements descr ibe how to render content
• Elements are enclosed in
• Tags
Slide 4
• (c ) PaulFodor(C SStonyBrook)
• A brief histor yof HTML
• In 1989,Tim Ber ner s
• -
• Lee wrote a memo proposing an
• Inter net
• -
• based hyper text system
• Ber ner s
• -
• Lee specified HTML and wrotethe browser and ser ver
• softwarein late 1990 and released it in 1991 (it had 18 elements/tags)
Slide 5
• (c ) PaulFodor(C SStonyBrook)
• A brief histor yof HTML
• HTML 3.2 waspublished as aW3C Recommendation inJanuar y 1997
• TheWorldWideWeb Consor tium (W3C) isthe inter national
• standardsorganization for theWorldWideWeb, founded in 1994 by
• Tim Ber ner s
• -
• Lee after he left the European Organizationfor Nuclear
• Researc h (CERN).
• It was fo und edat the Ma ssac husetts Institute ofTec hno logy Labo rator
yfor
• Com puterScience (MIT/LC S) with supp or tfrom the EuropeanCom
Slide 6
• (c ) PaulFodor(C SStonyBrook)
• A brief histor yof HTML
• XHTMLisa separatelanguage thatbeganasa refor mulation of
• HTML4.01 usingXML 1.0.
• XHTML1.0 was published as aW3C Recommendation on Januar y 26,
• 2000
• It is no longer being developed as a separate standard.
Slide 7
• (c ) PaulFodor(C SStonyBrook)
• HTML 5
• HTML5 was fir st released in on 22 Januar y 2008, with a
• major update and " W3C Recommendation" status in
• October 2014
• Thecur rent specificationis knownas the
• HTML Living
• Standard
• and ismaintained bya consor tiumof themajor
• browservendor s (Apple, Google, Mozilla, and Microsoft),the
• WebHyper textApplicationTec hnologyWorkingGroup
• (WHATWG)
Slide 8
• (c ) PaulFodor(C SStonyBrook)
• HTML
• Simple HTML web page
• <!DOCTYPE HTML>
• <html>
• <head>
• <title>My PageTitle!</title>
• </head>
• <body>
• <h1>Introduction</h1>
• <p>This is a simple HTML web page.The content here is part of
• line breaks so the text fits nicely in the browser w indow.</p>
Slide 9
• (c ) PaulFodor(C SStonyBrook)
• HTML
• BasicTags
• <html></ht ml>
• -
• Sur round entire document
• <head></h ead>
• -
• Sur round header mater ial (titles,
• css
• info,
Slide 10
• (c ) PaulFodor(C SStonyBrook)
• HTML
• More basic tags
• Links
• Thesemark a hyperlinkaround linktext.Whenclic kby
• user, browserloads the pagein the HREFattr ibute.
• url
Slide 11
• (c ) PaulFodor(C SStonyBrook)
• HTML
• More basic tags
• <IMG>
• -
• Will display an image
• Image file mustbe in apopular g raphicsfor mat (g if, jpg,
• png
• ,
• etc
• )
Slide 12
• (c ) PaulFodor(C SStonyBrook)
• HTML
• More on Links
• href
• attr ibute
• Thiscan be any URI or local file
• URI should include protocol, ser ver, and path
• Local file canbe specified wi than absolute or relativepath
Slide 13
• (c ) PaulFodor(C SStonyBrook)
• HTML
• More on Links
•
• id
• attr ibute on a tag
• Will scroll to the section marked with the named id
• som e_ web_pag e. html :
•
• Mo reStyles
Slide 14
• (c ) PaulFodor(C SStonyBrook)
• HTML
• -
• Lists
• Suppor ts:
• <UL></UL>
• -
• Unordered List
• <OL></OL>
• -
• Ordered List
Slide 15
• (c ) PaulFodor(C SStonyBrook)
• HTML
• Example: Lists
• <!DOCTYPEhtml>
• <h tml>
• <b od y>
• <h 2>Unorde redList</h2>
• <u l>
• <li>Coffee </li>
• <li>Tea </li>
• <li>Milk</li>
• </ul>
• <h 2>Orde red List</h2>
Slide 16
• (c ) PaulFodor(C SStonyBrook)
• HTML
• Adding styles to lists
• UL takes a style attr ibute to customize the list
• list
• -
• style
• -
• type
• circle
Slide 17
• (c ) PaulFodor(C SStonyBrook)
• HTML
• Example: Styled lists
• <!DOCTYPE ht ml>
• <h tml>
• <b od y>
• <h 2> Uno rderedList with Disc B ul lets</h2>
• <u lstyle= "
• list
• -
• style
• -
• type:disc
Slide 18
• (c ) PaulFodor(C SStonyBrook)
• HTML
• Formatting Tags
• <b></b>
• -
• Bold text
• <strong></strong>
• -
• Impor tant text(similarto bold)
• <
Slide 19
• (c ) PaulFodor(C SStonyBrook)
• HTML
• Example: Formatting Tags
• <!DOCTYPE html>
• <html>
• <body>
• <p>This text is normal.</p>
• <p><b>Thistext is bold.</b></p>
• <p><
• i
• >This text is italic.</
• i
• ></p>
Slide 20
• (c ) PaulFodor(C SStonyBrook)
• HTML
• -
• Comments
• --
• --
• >
• Example:
• <!
• This is a comment and does not affect
Slide 21
• (c ) PaulFodor(C SStonyBrook)
• HTML
• -
• Styles
• text
• text
• </tag>
• attr1 and attr2 are style proper ty names
Slide 22
• (c ) PaulFodor(C SStonyBrook)
• HTML
• Tables
• HTML Suppor ts creating tables
• Tags:
• <table></table>
• -
• Encloses theentire contents of the
• table
Slide 23
• (c ) PaulFodor(C SStonyBrook)
• HTML
• Example: Tables
• <h tml>
• <b od y>
• <h 2> Basic HTMLTab le</h 2>
• <table style= "width:100%">
• <tr>
• <
• th
• >
• Firstname
• </
Slide 24
• (c ) PaulFodor(C SStonyBrook)
• HTML
• Forms
• For ms can be usedto collec t data and respond to quer ies
• Tags:
• <for m></for m>
• -
• Thisencases the entire for m
• For ms contain a number of input elements aswell astext fields
Slide 25
• (c ) PaulFodor(C SStonyBrook)
• HTML
• Example: Forms
• <!DOCTYPE html>
• <html>
• <bod y>
• <h2>HTML Fo rms</h2 >
• <for m action ="/
• actio n_ page.ph p
• ">
• Fir stname:<
• br
• >
Slide 26
• (c ) PaulFodor(C SStonyBrook)
• HTML
• MiscellaneousTags
• <pre></pre>
• -
• Pre
• -
• for matted text Browser will
• render content as it is w r itten in the html file.
• <
• br
Slide 27
• (c ) PaulFodor(C SStonyBrook)
• CSS
• CSS =Cascading StyleSheets
• GreatlysimplifiesstylingHTML
• Easy to keep consistentstyling
• Instr uctionsare wr ittenas a
• rule
• -
• set
• 27
Slide 28
• (c ) PaulFodor(C SStonyBrook)
• A brief histor yof CSS
• CSSwas fir stproposed by
• Håkon
• Wium
• Lieon October10,
• 1994, a ndW3CCSSRecommendation (CSS1)was released in
• 1996.
• CSSlevel 2 specificationwasdeveloped bytheW3C and
• published asa recommendation in May1998.
• CSS2.1as finallypublished asaW3CRecommendation on 7
Slide 29
• (c ) PaulFodor(C SStonyBrook)
• A brief histor yof CSS
• CSS 3 is divided into several separatedocumen tscalled"mod ules"and its
notesarepostedon
• W3C:
• css3
• -
• bac kg round
• CSS Bac kg rounds and Border s Module Level3 Candidate Rec.Oct2017
• css3
• -
• box
Slide 30
• (c ) PaulFodor(C SStonyBrook)
• A brief histor yof CSS
• Thereisno single, integ ratedCSS4 specification
• The CSSWorking Group sometimes publishes "Snapshots", a
• collection of whole modules and par ts of other drafts that are
• consideredstable enoughto be implemented by browser
• developer s in
• 2007, 2010, 2015, 2017,and 2018.
Slide 31
• (c ) PaulFodor(C SStonyBrook)
• CSS rule
• -
• sets
• CSS r ule
• -
• setshave thefollowing for mat:
• Selector s indicate the t ag or other element
• Proper ty/value pair s g ive the attr ibute to define and
• the value of t he attr ibute
Slide 32
• (c ) PaulFodor(C SStonyBrook)
• CSS
• -
• Selector s
• Selector s can be
• A
• tag name
• (i.e. <p>)
• This will apply to all
• tags of that type in the docum ent
Slide 33
• (c ) PaulFodor(C SStonyBrook)
• CSS
• Examples: Selector s
• p{
• text
• -
• align: center;
• color: blue;
• }
• #C4 {
• text
• -
• align: left;
Slide 34
• (c ) PaulFodor(C SStonyBrook)
• CSS
• SelectorGrouping
• Selector s for elements with the same style can be g roupedand use
• a common style descr iption
• h1, h2, p {
• text
• -
• align: cen ter;
• color: red;
• }
• 34
Slide 35
• (c ) PaulFodor(C SStonyBrook)
• CSS
• Placement of CSS Information
• CSS style infor mation can be put in on e of three
• places:
• Exter nal sheet
• Can be used for an entire website
• Eac h .html file must reference same sheet
Slide 36
• (c ) PaulFodor(C SStonyBrook)
• CSS
• ExternalStyle Sheets
• my_s it e_st yle.c ss:
• body {
• backgr ound
• -
• color :
• li ghtbl ue
• ;
• }
• h1 {
• color : navy;
Slide 37
• (c ) PaulFodor(C SStonyBrook)
• <ht ml>
• <head>
• <st yle>
• body {
• backgr ound
• -
• color : li nen;
• }
• h1 {
• color : maro on;
• margin
• -
• left: 40px;
Slide 38
• (c ) PaulFodor(C SStonyBrook)
• Styleinfo canbeplaced inside anytag(as hasbeen seen earlier)
• color:red
• ; text
• -
• 38
• CSS
• LocalInline styles
Slide 39
• (c ) PaulFodor(C SStonyBrook)
• CSS
• Cascading Order
• With a mix of inter nal, exter nal, and inline style
• infor mation, the s tyles will be applied by building a
• in the following pr ior ity order:
• Inline style (inside an HTML element)
• Exter nal and inter nal style sheets (in the head section
• using order of links/style sections in the head)
Slide 40
• (c ) PaulFodor(C SStonyBrook)
• CSS
• Style Attributes
• Color s
• Bac kg rounds
• Border s
• Marg ins
• Padding
Slide 41
• (c ) PaulFodor(C SStonyBrook)
• CSS
• -
• Color s
• Color s ca n be specifiedas:
• lightblue
• etc
• HTML suppor ts 140 standard color names
Slide 42
• (c ) PaulFodor(C SStonyBrook)
• CSS
• Back grounds
• Elements can have different bac kg rounds
• Color s
• Images
• 42
Slide 43
• (c ) PaulFodor(C SStonyBrook)
• CSS
• Back ground Color
• Attr ibute: bac kg round
• -
• color
• Value: descr iption of color s
• h1 {bac kg round
• -
• color:g reen;}
Slide 44
• (c ) PaulFodor(C SStonyBrook)
• CSS
• Back ground Images
• Attr ibute: bac kg round
• -
• image
• Value is usually a URL of a g raphic file
• Example:
• body {bac kg round
Slide 45
• (c ) PaulFodor(C SStonyBrook)
• CSS
• Back ground Images
• Images can be repeated if t wo small tocover an area
• Attr ibute: bac kg round
• -
• repeat
• Values:
• rep eat
Slide 46
• (c ) PaulFodor(C SStonyBrook)
• CSS
• -
• Border s
• CSS allows specification of the style, width and color of ele ment
• border s
• Attr ibutes:
• border
• -
• style
• : style keyword
Slide 47
• (c ) PaulFodor(C SStonyBrook)
• CSS
• -
• Border s
• Shor thands
• :
• border
• -
• left
• -
• style , border
• -
Slide 48
• (c ) PaulFodor(C SStonyBrook)
• CSS
• -
• Border s
• <!DOCTYPE html>
• <ht ml>
• <head >
• <st yle>
• h2 { bord er:10 px das hed green ;}
• p { bo rder: 5p xsol idred; }
• </s tyle>
• </h ead>
• <bo dy >
• <h2>The borderProperty</h2>
Slide 49
• (c ) PaulFodor(C SStonyBrook)
• CSS
• -
• Margins
• Attr ibute:
• marg in
• Similar to
• border
• , marg in has separate attr ibutes for left, top,
• bottom, and r ight sides
Slide 50
• (c ) PaulFodor(C SStonyBrook)
• CSS
• Example: Margin
• <!DOCTYPEhtml>
• <h tml>
• <head>
• <sty le>
• div {
• bo rde r: 1p xsolid blac k;
• margin: 25 px 50 px ;
• ba ck gro und
• -
• color:
Slide 51
• (c ) PaulFodor(C SStonyBrook)
• CSS
• -
• Padding
• Padding generates space around an element but within
• its border
• Attr ibutes: padding, padding
• -
• left, padding
• -
• top, padding
• -
Slide 52
• (c ) PaulFodor(C SStonyBrook)
• CSS
• Example: Padding
• <!DOCTYPEhtml>
• <html>
• <head>
• <style>
• div { border: 1px solid black;
• padding: 25px;
• background
• -
• color:
• lightblue
Slide 53
• (c ) PaulFodor(C SStonyBrook)
• CSS
• Height/Width
• These attr ibutes g ive the height and width of an
• element
• Default value is
• auto
• whic h lets the browser
• figure out the best size
• Values can be specified as:
Slide 54
• (c ) PaulFodor(C SStonyBrook)
• CSS
• Example: Height/Width
• <!DOCTYPE html>
• <ht ml>
• <head >
• <st yle>
• div { h eig ht: 200px;
• width :50 %;
• back gro un d
• -
• color:
• po wderbl ue
Slide 55
• (c ) PaulFodor(C SStonyBrook)
• CSS
• The Box Model
• CSS Box Model refer s to t he layout of a n element
• including marg in, border s, padding, and content
• Content:
• The content of t he element
• Padding
• : area around the content and w ithin the
• border. Padding is transparent
Slide 56
• (c ) PaulFodor(C SStonyBrook)
• CSS
• Box Model
• 56
Slide 57
• (c ) PaulFodor(C SStonyBrook)
• CSS
• Example: Box Model
• <!DOCTYPE html>
• <html>
• <head>
• <style>
• div { background
• -
• color:
• lightgrey
• ;
• width: 300px;
Slide 58
• (c ) PaulFodor(C SStonyBrook)
• CSS
• Styles for Links
• Links can be styled using any CSS attr ibutes (color, bac kg round
• -
• color,
• text
• -
• decoration, font
• -
• family, font
• -
Slide 59
• (c ) PaulFodor(C SStonyBrook)
• CSS
• Example: Link Styles
• <!DOCTYPEhtml>
• <h tml>
• <head>
• <sty le>
• a:link { tex t
• -
• de co ration : no ne ;}
• a:visited {text
• -
• de co ration : no ne ; co lor: g ree n; }
Slide 60
• (c ) PaulFodor(C SStonyBrook)
• CSS
• Styles forLists
• Unordered list: list
• -
• sty le
• -
• type
• Circle
• Square
Slide 61
• (c ) PaulFodor(C SStonyBrook)
• CSS
• Styles forLists
• Attr ibute : list
• -
• sty le
• -
• posi ti on (shor thand attr ibute: list
• -
• styl e)
• Inside
Slide 62
• (c ) PaulFodor(C SStonyBrook)
• CSS
• Example: Styles for Lists
• <!DOCTYPE html>
• <html>
• <head>
• <styl e>
• li {b or der:so lid ;}
• ul .a
• { list
• -
• style
• -
Slide 63
• (c ) PaulFodor(C SStonyBrook)
• CSS
• Styles for Tables
• Var ious table ele ments can take on proper ties like border, padding,
• text
• -
• align, width, height and other s
• border
• width
Slide 64
• (c ) PaulFodor(C SStonyBrook)
• CSS
• Example: Table Styling
• <!DOCTYPE ht ml>
• <html>
• <head>
• <styl e>
• table, td ,
• th
• {
• bor der:1px sol id black;
• }
• table {
Slide 65
• (c ) PaulFodor(C SStonyBrook)
• Summar y
• HTML
• HyperText
• Markup
• Language
• Used to descr ibe most web page content
• Static
