Scribd
Upload
5 views

Converted Presentation

The document provides an overview of web development technologies, specifically focusing on HTML and CSS. It outlines the evolution of HTML from its inception in 1991 to XHTML and discusses the role of CSS in styling web pages, including various properties and the box model. Additionally, it covers the structure of HTML documents, including tags, attributes, and the importance of consistent styling through internal and external style sheets.

Uploaded by

samuel asefa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
5 views

Converted Presentation

The document provides an overview of web development technologies, specifically focusing on HTML and CSS. It outlines the evolution of HTML from its inception in 1991 to XHTML and discusses the role of CSS in styling web pages, including various properties and the box model. Additionally, it covers the structure of HTML documents, including tags, attributes, and the importance of consistent styling through internal and external style sheets.

Uploaded by

samuel asefa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 65

Stony Brook Univer sity

http://www.cs.stonyb
rook.edu/~cse316
Web DevelopmentTechnologies:
HTML and CSS
1
HTML

CSS
2
Star ttag

Text in angle brac kets(i.e. <body>)

End tag

Text withleading slashin angle brac


kets(i.e. </body>)
it in 1991 (it had 18 elements/tags)

HTML 2.0 waspublished as


RFC1866 in 1995
https://tools.ietf.org/htm l/rfc1866

A Request for Comments (RFC)is a


publication from the Inter net
Society (ISOC)
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
mission and
the Defen seAdvanced Researc h
ProjectsAgenc y (DARPA)
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.
Standard
and ismaintained bya consor
tiumof themajor
browservendor s (Apple, Google,
Mozilla, and Microsoft),the
WebHyper textApplicationTec
hnologyWorkingGroup
(WHATWG)

On 28 May 2019, t heW3C


<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>
</body>
</html>
Tags
<body></ body>
-
Contains the main content of the
page

<p></p>
-
Hold a single parag raph that the
browser will
typeset.
Targetattr ibute,indicateswhic
hwindow/tabshould beused
for thelinked page

Default. Place the content in the


raphicsfor mat (g if, jpg,
png
,
etc
)

For mat :
<IMG
src

url
Content can be text OR an image.
Ex:
<A HREF=
http://target.com /path/file.html
>
<IMG
src

</A>
Mo reStyles

Inner li nk:

Mo reStyles

Mo reStyles

Fro mano ther _web_ pag e. html :


-
Unordered List

<OL></OL>
-
Ordered List

<LI></ LI>
-
Encloses a single list item
14
</ul>
<h 2>Orde red List</h2>
<
ol
>
<li>Coffee </li>
<li>Tea </li>
<li>Milk</li>
</
ol
style
-
type

circle

square

disc
</ ul>
</ bo dy>
</ html>
<!DOCTYPE ht ml>
<h tml>
<b od y>
<h 2> Uno rderedList with Squ
areBu ll ets</h2>
<u lstyle= "
list
-
>
-
Emphasiz edtext(similarto Italic)

<mark></mark>
-
Markedtext

<small><small>
-
Small text
em
></p>
<p><strong>Thistext is
strong.</strong></p>
<p><mark>This text is
marked.</mark></p>
<p><small>This text is
small.</small></p>
<p><del>This text is
deleted.</del></p>
>

Example:
<!

This is a comment and does not


affect
render ing of the page at all
--
>
20
for text color s

font
-
f amily
for text fonts

font
-
size
for textsizes
<
th
></
th
>
-
These tagssuppor t a rowused
specificallyfor
column heading s
<
th
>Age</
th
>
</tr>
<tr>
<td> Jill</td>
<td> Smith</td>
<td> 50 </td>
For m tag attr ibutes

action=
-
This indicates thescr ipt on the ser
ver to r un when the submit
action is selected

method=
>
<inputtyp e="radio" name="gend
er"> Female<
br
>
<inp ut ty pe="radio " name="gend
er"> Male<
br
>
<inp ut ty pe="radio " name="gend
br
>
-
Add a line break here.There is no
</
br
>

<
hr
>
Easy to keep consistentstyling

Instr uctionsare wr ittenas a


rule
-
set
27
(CSS1)was released in
1996.

CSSlevel 2
specificationwasdeveloped
bytheW3C and
published asa recommendation in
May1998.

CSS2.1as finallypublished
asaW3CRecommendation on 7
CSS GeneratedContent forPaged
MediaModule
Working Draft May 2014

css3
-
layout
CSSTemplateLayout Module
Note
Mar 2015
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.
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

Proper ty/value pair s are


separated with a semicolon ;
31
tags of that type in the docum ent

An
id

The style will apply


toANY tag with the named id.

LargeRed
}
.center {
text
-
align: center;
color: green;
}
Applies to all
paragraphs in the
document
use
a common style descr iption
h1, h2, p {
text
-
align: cen ter;
color: red;
}
34
Can be used for an entire website

Eac h .html file must reference


same sheet

Inter nal sheet

Can be used to consistently style 1


html page
<ht ml>
<head>
<l ink
rel
=" styl eshee t" type= "t ext/
css
"
hre f
=" my_si te_s tyl e.css ">
</ head>
left: 40px;
}
</ styl e>
</ head>
<body>

</ body>
</ html>
All style information
enclosed in <style> tag within
the <head> of an html
color:red
; text
-

38
CSS

LocalInline styles
element)

Exter nal and inter nal style sheets


(in the head section
using order of links/style sections
in the head)

More specific selector s are


selected
Bac kg rounds

Border s

Marg ins

Padding

Height/Width
40
values

-
255 for eac h

An RGBvaluelike:
rgb
(255,0,0)
Elements can have different bac kg
rounds

Color s

Images
42
-
color:g reen;}

div {b ac kg round
-
color:#777700;}

div is just used to divide the page


into
subsections
Attr ibute:bac kg round
-
position:

Value: (hor izontal and ver tical


positioning (left, center, r
ight,bottom,
center, top))
Bac kg round
-
attac hment:scroll

backg round

Values for bac kg round must be in


this order:
Three values

1
st
app lies to top, 2
nd
app lies to left and r ight, 3
rd
app lies to bottom

Four valu es
sty le

Same for
border
-
x
-
wid th and
border
-
x
<bo dy >
<h2>The borderProperty</h2>
<p>Thi spro pertyisa s ho
rthandpro pert y for border
-
width,bo rder
-
style,and
bo rder
-
A length in px,
pt
, cm,
etc

%
-
marg inis a percentage of the
widthof the containing element
}
</style >
</he ad >
<b od y>
<h2 >Themargin sh orthan dprop
erty
-
2 values</h2 >
<d iv>Th isdiv elem en t ha s a top
andbo ttom m argin of 25 px ,an d
Values:

Length

A length value in
pt
, px, cm,
em
,
etc
lightblue
;}
</style>
</head>
<body>
<h2>The padding shorthand
property
-
1 value</h2>
<div>This div element has a top,
whic h lets the browser
figure out the best size

Values can be specified as:

A length

in
pt
, px, cm, etc.
color:
po wderbl ue
;}
</s tyle>
</h ead>
<bod y>
<h2 >Setthe hei gh tand width of
an elemen t</h2>
<p>Thi sdiv elemen thas a heig
htof 20 0p xand a width of 50%:</
p>
Padding
: area around the content and w
ithin the
border. Padding is transparent

Border
:A border that sur roundsthe
element and
padding
CSS

Box Model
56
margin: 20px; }
</style>
</head>
<body>
<h2>Demonstrating the Box
Model</h2>
<p>The CSS box model is
essentially a box that wraps around
every HTML element. It consists
of: borders, padding, margins, and
the actual content.</p>
visite d

A link thathas been vi sited

:
hover

A linkwhen the cur sor


os
hover ing over it
red ; }
a:ac tive { tex t
-
de co ration : un de rline; co lor:
ho tpink
;}
</style >
</he ad >
<b od y>
<p><b><a
href
Upper
-
roman

Lower
-
roman

Upper
-
Inside

bullet or marker is pulled in wit h


text (so
inside border)

Outside
-
style
-
po sit io n:ou tsi de (d efault) :</h2
>
<ul class="a">
<li>Coffee
-
A brewed dri nk</li>
<li>Tea
-
border

width

text
-
align

border
-
>
Fir stn ame
</
th
>
<
th
>
Lastn ame
</
CSS

Cascading Style Sheets

Help customize look a nd feel of


web pages

Numerous ways to address


elements and g roups of
elements

You might also like