SLIDE 1
Hypertext Markup Language Drawing on the Web Hypertext Markup - - PowerPoint PPT Presentation
Hypertext Markup Language Drawing on the Web Hypertext Markup - - PowerPoint PPT Presentation
Hypertext Markup Language Drawing on the Web Hypertext Markup Language Drawing on the Web A language for describing Web pages HTML HTML is not a programming language, it is a markup language A markup language is a set of markup tags HTML
SLIDE 2
SLIDE 3
Drawing on the Web Hypertext Markup Language Early History
1990: Original HTML specification written by physicist, Tim Berners-Lee for cross-referencing documents 1993: First text-based browser, Lynx, released 1993: Mosaic browser released, adding images, nested lists, forms 1994: First World Wide Web conference held in Geneva 1994: Netscape is formed 1994: The World Wide Web Consortium is formed, w3.org
SLIDE 4
Palo Alto Research Center, Incorporated, Courtesy of the PARC Library, 1970 ca.
File Edit Opbons NtMQate Hotllst Pi n 1otate
Ir.I IEEJ
- D~
Hie· ·1 NCS/\ Mosaic Hoae Pa11181
Doc.aEN~ URL: hllp:1/- nua uiuc edu/SDli/SaftwareJNos.aic./NCS AMosaicHw..html
N C
s
A
MO AIC
X W1bdo-w Systea
- 1d1ttoeolt W1.l\OOW9 • Mil~ln409h
We-lco~ e, LO NC3A M
- sdi c-, on l nt£<rne-t
info r.n o.ti o n brcmse-r
- nd i 'orl d Wide- w,..1:,
cl :£-T.
- L. NC3A
M
- s d i ~ wos deve loped :it Lbe N::ition~l
:e,r.Le,r for Super<:-C1lllputing Applic::it i ons ot tbe- Universi-:v
- f Ill:::1ois
in
> Urb:ina
Cha111.p~ i 9 n . lf:'SA !-1osa:c: so f ttv::ire ls copyr:rrl:.~e,d by Th e B:'.)ard of ':'n1gteeg
- f t he :Jni ve r s1 t y o f Tl :ino:s
(:JI) , ar.d owne r sh:p rema1ng
- r:th
the
C P.
J"!rt · 97
Tbu S:.> f tt ~t u Duvu · upmunt 1u up et l- lCSf\ }to wur kud t>J, SICS,\ }fus :1.1 c: fur
tltier ~y
:.>
t yu ,.r_
- ad ,x;;'vra l0c:1
r n0d a lo t. .10 t.h;; proc:as:..
, • .. <1r8 ho norra d th :,l. \'f.- ~ran;i c:1b
l 0 l.o b.;lp br .1 n9
t hi s techn ology to t bitil moss es ar.d apprec1.!)te d a l l tl:ra su pport ar.d ferad be. c k""" he.vitil r,;,ceive d :n r,;,t urn. [low ev,;,r , t he t11118 has com,;, (or us to c:or.c,;,n t r~te
- ur : imi te d
l'Etsources
- ir. o the r dre-o.s o f interi"st
!l.nd den..')3:opm.e-nt on M
- sa ic
i s com.p leLe, ,
- UCSA ~oso:c.-
:er ~he :< Wir.dow £ys~em
- li C~A f-:oge:c
:er
- :he Apple
).1ac .. ntoch
e IK'~A t,,;"n~n
l C! :~l
l,far:rc1 nf·
Wi1dnV1• ~ i 'oll d W i de Web Re.:
- u ,..::,
io -h n fu l1 0Y,
i 119 re
0 1 I'Cl i:.; ;:1
111 ::1ve11
' c1h 1.:: to hulp ir1t.1udui: 1:
i:;yba.r o pcc;;
end h1;;p tr ack of _ t.::; 91o wt.h:
- A 9 10-:oa:-y o: 'fio=l d Wide l.,t,
'e;, tenns
d t.d ac ro::i.yr:.s
- An INCEX to M
cs C1.1 c rral ate d doc ument s
- NCSA ~ose:
c: Access
?egE< fe r persons
ff::. t h d 1sob1 l U:1es
- M
- saic
ar.d 'ti{,.~' r e la t ed T.;toriols
- Inte::-ne-t
ke-source · = Meti1 In dex i1t ~CSA
- C
+
- .
+ .
.,
+ C T +
'
+ .
yu1! tu Help
...
_J
;J
Drawing on the Web Hypertext Markup Language
1993, NCSA Mosaic web browser
SLIDE 5
Drawing on the Web Hypertext Markup Language
Keywords surrounded by angle brackets, for example:
HTML Tag
<html> HTML tags normally come in pairs, like <h1> and </h1> The first tag in a pair is the “start tag,” the second tag is the “end tag” Start and end tags are also called “opening” and “closing” tags Some tags, such as <img>, are self-closing
SLIDE 6
Drawing on the Web Hypertext Markup Language
An HTML element is everything from the start tag to the end
HTML Element
tag. For example: <p>This is a paragraph.</p> Start tag: <p> Element content: This is a paragraph. End tag: </p>
SLIDE 7
Drawing on the Web Hypertext Markup Language
HTML documents describe web pages
HTML Documents
All they consist of is HTML tags in plain text Networked HTML documents are web pages Recommended plain text editors: Sublime Text and Visual Studio Code
SLIDE 8
Drawing on the Web Hypertext Markup Language
Web browsers read HTML documents and display them as
Web Browsers
web pages Web browsers do not display HTML tags, but use them to interpret the content of the page This is where most of our drawing will happen. Current browsers include:
- Firefox
- Safari
- Chrome
- Edge
- Opera
- Tor
- Brave
SLIDE 9
Drawing on the Web Hypertext Markup Language
This is where we will publish our projects during the semester
i6 Web Server
A server is just a computer that is always on, ready to serve files when they are requested i6 is a secure, Unix-based Web server You will receive an email with your account information (if you don’t already have one) Your URL will be: i6.cims.nyu.edu/~netid
SLIDE 10
Drawing on the Web Hypertext Markup Language
Web pages are usually created “locally” on a personal
SFTP: SSH (Secure) File Transfer Protocol
computer, then uploaded to a web server A web page is not publicly accessible until it’s published to a web server An FTP client is used to transfer files from a personal computer to a server Cyberduck, WinSCP, Transmit, and FileZilla are a few FTP clients to choose from “Local” files are those on a personal computer, “remote” files are those on a web server—“live”
SLIDE 11
Drawing on the Web Hypertext Markup Language
Standard file permission:
File Permissions
644 Owner can read and write file; group can read file;
- thers can read file
Standard directory permission: 755 Owner can read, write and execute file; group can read and execute file;
- thers can read and execute file
SLIDE 12
Drawing on the Web Hypertext Markup Language
First version published in 2008, HTML5 is the latest HTML
HTML5
standard. It became an official W3C recommendation as of October 2014.
- New elements
- New attributes
- Full CSS3 support
- Video and audio
- 2D and 3D graphics
- Web applications
SLIDE 13