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 markup tags HTML uses markup tags to describe web pages “Hypertext” is the ability to link one page to another
Hypertext Markup Language Introduction to Web Design 1990: Original HTML specification written by physicist, Tim Early History 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
Hypertext Markup Language Introduction to Web Design File Edit Opbons NtMQate Hotllst Pin 1otate Help Ir.I IEEJ o D~ Hie· ·1 NCS/\ Mosaic Hoae Pa11181 Doc.aEN~ URL: hllp:1/ - nua uiuc edu/SDli/SaftwareJNos.aic./NCS AMosaicHw..html ... s N C A MO AIC X W1bdo-w Systea • 1d1ttoeolt W1.l\OOW9 • Mil~ln409h ond i 'orl d Wide- w,..1:, We-lco~e, LO NC3A Mosdic-, on l nt£<rne-t infor.no.tion brcmse-r cl:£-T.L. NC3A wos deve, lope,d :it Lb£< N::itiondl :e,r.Le,r for Super<:-C1lllputing Applic::it i ons ot tbe- Mosdi~ > Urb:ina Universi-:v of Ill:::1ois in Cha111.pdi9n. lf:'SA !-1oso:c: softtv::ire copyr:rrl:.~e,d by ls The B:'.)ard of ':'n1gteeg of the :Jnivers1ty of Tl:ino:s ar.d ownersh:p rema1ng or:th the (:JI), CP. · 97 J"!rt Tbu S:.>ftt ~tu Duvu · upmunt 1uup et l-lCSf\ }to wur kud t>J, SICS,\ }fus :1.1c: fur :.> t yu,.r_ tltier ~y oad ,x;;'vra l0c:1rn0d a lot. .10 t.h;; proc:as:.. ,• .. <1r8 honorrad th:,l. ~ran;i c:1bl0 l.o b.;lp br.1n9 \'f.- 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 our : 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,, _J N:SA Moso:c: P:dtforms: ~he :< • UCSA ~oso:c.- :er Wir.dow £ys~em :er • li C~A f-:oge:c -:he Apple ).1ac .. ntoch e IK'~A t,,;"n~n l C! :~l l,far:rc1 nf· Wi1dnV1• ~ Wide Web Re.: ou ,..::,io -hn ful10Y,i119 re ' c1h 1.:: to hulp i'olld 0 1 I'Cli:.; ;:1111 ::1ve11 ir1t.1udui:1: yu1! tu end h1;;p track of _ i:;yba.r o pcc;; t.::; 91owt.h: • A 9 10-:oa:-y o: 'fio=ld Wide l.,t,'e;, tenns acro::i.yr:.s dt.d • 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 T + ' • C Palo Alto Research Center, Incorporated, Courtesy of the PARC Library, 1970 ca. 1993, NCSA Mosaic web browser
Hypertext Markup Language Introduction to Web Design 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
Hypertext Markup Language Introduction to Web Design 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>
Hypertext Markup Language Introduction to Web Design 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
Hypertext Markup Language Introduction to Web Design 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
Hypertext Markup Language Introduction to Web Design <!DOCTYPE html> HTML Document Essentials <html> <head> <meta charset="utf-8"> <title>Page Title</title> </head> <body> </body> </html>
Hypertext Markup Language Introduction to Web Design <!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
Hypertext Markup Language Introduction to Web Design 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”
Hypertext Markup Language Introduction to Web Design 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
Recommend
More recommend
