SLIDE 1
Hypertext Markup Language Introduction to Web Design Hypertext - - PowerPoint PPT Presentation
Hypertext Markup Language Introduction to Web Design Hypertext - - PowerPoint PPT Presentation
Hypertext Markup Language Introduction to Web Design Hypertext Markup Language Introduction to Web Design 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
SLIDE 2
SLIDE 3
Introduction to Web Design 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 Pin 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 Mosdic-,
- n l nt£<rne-t
infor.no.tion brcmse-r
- nd i 'orl d Wide- w,..1:,
cl:£-T.L. NC3A Mosdi~ wos deve, lope,d :it Lb£< N::itiondl :e,r.Le,r for Super<:-C1lllputing Applic::it i ons ot tbe- Universi-:v
- f
Ill:::1ois in
> Urb:ina
Cha111.pdi9n. lf:'SA !-1oso:c: softtv::ire
ls
copyr:rrl:.~e,d by The B:'.)ard of ':'n1gteeg
- f the
:Jnivers1ty
- f
Tl:ino:s (:JI), ar.d ownersh:p rema1ng
- r:th
the
CP.
J"!rt · 97
Tbu S:.>ftt ~tu Duvu · upmunt 1uup et l-lCSf\ }to wur kud t>J, SICS,\ }fus :1.1c: fur
tltier ~y
:.>
t yu,.r_
- ad ,x;;'vra l0c:1rn0d a lot.
.10 t.h;; proc:as:..
,• .. <1r8 honorrad
th:,l.
\'f.-
~ran;i c:1bl0 l.o b.;lp
br.1n9
this technology to tbitil mosses ar.d apprec1.!)ted a l l tl:ra support ar.d feradbe.ck""" he.vitil r,;,ceived
:n r,;,turn.
[lowev,;,r, the t11118 has com,;, (or us to c:or.c,;,ntr~te
- ur : imi ted
l'Etsources
- ir. othe r dre-o.s of interi"st
!l.nd den..')3:opm.e-nt on Mosaic i s com.pleLe,,
N:SA Moso:c: P:dtforms:
- 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'olld Wide Web Re.:
- u ,..::,io -hn ful10Y,i119 re
0 1 I'Cli:.; ;:1111
::1ve11
' c1h 1.:: to hulp
ir1t.1udui:1:
i:;yba.r o pcc;;
end h1;;p track
- f _
t.::; 91owt.h:
- A 9 10-:oa:-y
- : 'fio=ld Wide l.,t,'e;,
tenns
dt.d
acro::i.yr:.s
- An INCEX to McsC1.1c
rralated documents
- NCSA ~ose:
c: Access ?egE< fer persons
ff::. th d1sob1 l U:1es
- Mosaic
ar.d 'ti{,.~' r e la t ed T.;toriols
- Inte::-net
kesource · = Meti1 In dex i1t ~CSA
- C
+
- .
+ .
.,
+ C T +
'
+ .
yu1! tu Help
...
_J
Introduction to Web Design Hypertext Markup Language
1993, NCSA Mosaic web browser
SLIDE 5
Introduction to Web Design 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
Introduction to Web Design 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
Introduction to Web Design 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, Brackets, and Visual Studio Code
SLIDE 8
Introduction to Web Design 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 Current browsers include:
- Firefox
- Safari
- Chrome
- Edge
- Opera
- Tor
- Brave
SLIDE 9
Introduction to Web Design Hypertext Markup Language
<!DOCTYPE html>
HTML Document Essentials
<html> <head> <meta charset="utf-8"> <title>Page Title</title> </head> <body> </body> </html>
SLIDE 10
Introduction to Web Design Hypertext Markup Language
<!DOCTYPE html> tells browsers that they are interpreting
HTML Document Essentials
an HTML document Text between <html> and </html> describes the web page Text between <title> and </title> is displayed as the page title (usually at the top of the browser window) Text between <body> and </body> is the visible page content
SLIDE 11
Introduction to Web Design 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, Fetch, 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 12
Introduction to Web Design 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
- Smartphone apps