1 / 15

HTML overview

HTML overview. Turn sound on and click the icon at bottom right. What is HTML?. H yper T ext M ark-Up L anguage. Hypertext makes something happen when you click it. Mark-up and mark-down began as typesetting concepts, so: The <i>quick</i> brown fox

jcorona
Download Presentation

HTML overview

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML overview Turn sound on and click the icon at bottom right

  2. What is HTML? Hyper Text Mark-Up Language Hypertext makes something happen when you click it Mark-up and mark-down began as typesetting concepts, so: The <i>quick</i> brown fox displays “quick” in italics like this: The quick brown fox

  3. Why a special language? Telephone networks can only use ASCII (teleprinter) characters Must handle images, formatting and animation Must work with all network devices

  4. Examples of HTML tags <strong> and </strong> enclose bold text <i> and </i> enclose italic text <p> and </p> enclose a paragraph and some tags do not require closing, such as: <br> which is a line break <hr> which is a horizontal rule

  5. Tags can be nested The <strong>quick <i>brown</i> fox</strong> jumps displays as The quick brown fox jumps Tags must be closed in the correct order but they are not case-sensitive

  6. Special characters Non-keyboard and ambiguous characters use ‘ampersand-semicolon’ codes called entities: &nbsp; hard space (= ‘nonbreaking space’) &lt; < (= ‘less than’) &gt; > (= ‘greater than’) &para; ¶ (= ‘paragraph’) &amp; & (= ‘ampersand’) &yen; ¥ (= ‘yen’)

  7. Web page structure Every page begins with a declaration for browsers: <!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN"> The code proper begins with a HTML tag: <html> There are two sections to every page, a header: <head> containing code that applies invisibly to the whole page </head> and a much larger body <body>that contains everything intended for display on the screen. Comments can go anywhere and they look like this: <!-- test fonts --> and there are always two closing tags: </body> </ html >

  8. Header tags <!doctypeHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>Page title that appears in your browser title bar and in Google</title>Meta tags like these are read by browsers and search engines and are not closed: <metaHTTP-EQUIV="Content-Type"CONTENT="text/html; charset=iso-8859-1"> (translation: browsers should use this character set for display)<metaNAME="description"CONTENT=“description of page for Google"><metaNAME="keywords"CONTENT=“list of words for search engines"><metaNAME="author"CONTENT=“author’s contact address"><linkREL=StyleSheetHREF="styles.css"TYPE="text/css"MEDIA=screen>(translation: links to other files that this page requires) Headers may also contain lengthy JavaScript to do things HTML cannot, like opening new pages or validating a login password. This is a simple example: <scriptlanguage="JavaScript1.2">document.oncontextmenu=showmenuie5;if(document.all&&window.print)document.body.onclick=hidemenuie5;</script> </head>

  9. Common Body tags Most tags can have parameters like these: <bodybackground="stippleblue.jpg"> <palign="justify">.. contents of paragraph .. </p> <ahref="http://www.microsoft.com/">.. clickable text ..</a> <ultype="square"><li>bulleted list item 1</li><li>bulleted list item 2</li></ul> clickable JavaScript button: <INPUTtype=buttonvalue=“Biography"onClick="window.open('biography.html','biography','toolbar=no,directories=no,location=no,status=no,menubar=no,resizable=yes,scrollbars=yes,width='+screen.width+', height='+Math.round(screen.height*.88)+',screenX=0,screenY=0,left=0,top=0');returnfalse"> </body>

  10. <HTML><HEAD><METAHTTP-EQUIV="Content-Type"CONTENT="text/html; charset=iso-8859-1"><TITLE>Senior Net</TITLE><metaname="robots"content="noindex,nofollow"></HEAD><BODYbgcolor="#eeffee"><h1STYLE="font-family: comic sans ms,serif;text-align: center">Senior Net Rotorua</h1><br><h2STYLE="font-family: comic sans ms,serif;text-align: center">A computer club for over-55's who want to learn new skills.</h2><br><blockquote><blockquote><blockquote><pSTYLE="font-family: comic sans ms,serif;font-size: 20px;text-align: justify"><imgsrc="regency.jpg"width="256"height="169"border="0"hspace="30"vspace="10"align=right>The club meets at 2 pm on the second Wednesday of every month at the Community Centre, Regency Park Estate, Brents Road, Te Ngae, Rotorua and visitors are always welcome.&nbsp; Meetings usually begin with a talk or audio-visual presentation followed by question time and a sociable cup of tea.&nbsp; Training courses are arranged whenever needed to meet member demand.&nbsp; For more information please phone Chairman Tony Baker on 07 345 7607 or <ahref="mailto:tbaker@wave.co.nz?subject=Please Send Me A SeniorNet Membership Application Form">apply to join now</a>.</p></blockquote></blockquote></blockquote><pSTYLE="font-family: comic sans ms,serif;font-size: 20px;text-align: justify">This is a brand new site and we have exciting plans to develop it ourselves, so please watch this space!</p></BODY></HTML>

  11. copying source code Save page with Firefox or Internet Explorer On Menu Bar click: View > Source Code Search for displayed text you remember Study code, parameters and “href” links Look for related JavaScript in page header Study .css style sheet among saved files Smart editors often generate verbose code

  12. Examples of garbage Empty parameters : <BODYbackground=""bgcolor=""style=""title=""> </BODY> Three tags where one would do and px isn’t needed: <SPANclass=text><FONTface="Engravers MT" size=6><SPANstyle="FONT SIZE: 44px;LINE-HEIGHT: 52px">.. text that SPAN tags apply to ..</SPAN></FONT></SPAN> Editor-generated commentary and promos: <!--$sitebuilder version="2.2.7" extra="Java(1.5.0_04)“ md5="62b9336aaf8f6586f20109e2774490f4"$--> <!--$templateKey Blank||1.0.0$--> <!-- text below generated by server. PLEASE REMOVE --> <!-- Counter/Statistics data collection code --> <METANAME="generator"CONTENT="AceHTML 5 Freeware">

  13. Smart & dumb editors Simple text editors like Notepad work but are hard to use for large tasks Drag-and-drop editors are easy to use but code is verbose and often contains bugs Smart editors highlight syntax, use buttons or pick lists and have instant viewers

  14. Some useful links Downloadable HTML home-study tutorial:http://www.mcli.dist.maricopa.edu/tut/download.html Lists of HTML tags and parameters: http://www.htmlcodetutorial.com/quicklist.html http://www.htmlhelp.com/reference/html40/alist.html On-LineWeb Page Validator http://validator.w3.org/

More Related