3rd: WRITING HTML CODE DEMO 2YOU DOWNLOAD: WEB AUTHORING WITH HTML (see Lab 10!) http://help.unc.edu/pdf/107.pdfThen you’ll launch DREAMWEAVER, show CODE, Select All the code, and DELETE IT.I’ll use WORD here to INCREASE FONT SIZE.HTML BASICSCommands (like Turing keyword): most are typed between two tags: beginner and ending.Tags use < > brackets:─Beginner tag: <title>─Ending tag: </title>Example:<title> Welcome to my Page! </title>Some commands don’t use an ending tag.Example:<p>which causes a paragraph break.<br>which causes a line break.IMPORTANT SIDEBAR! None of the spacing in your source code will be read by the browser. That’s just for “programmer readability,” much like inserting paragraph spaces(and indenting) in your Turing code.To format text, you will use HTML formatting tags.Examples:Boldface: I do <b> not </b> like runny eggs.is rendered as:I do not like runny eggs.<br>Headers: <h1> This is a level one header </h1>Header styles are 1 through 6; in relation to normal text:<h1> is the most dramatic, and <h6> the least.Controlling Spacing, ordered and unordered lists, using horizontal lines, adding graphics, links, mailto’s, etc…….ALL covered in the ATN handout.CRITICAL DIGRESSION:ABSOLUTE AND RELATIVE REFERENCING! ADDING LINKS TO OTHER PAGESYou will learn this format:Absolute reference:<a href = “full URL goes here”> anchor text </a>Relative reference:<a href = “filename.ext”> anchor text </a>Where “anchor text” is the text that is displayed as the link (user clicks on it).Examples:<a href = “http://www.cnn.com”> CNN news </a><a href = “products.html”> Our Products! </a>Note the IMPORTANT differences here!PREVIEW OF COMING ATTRACTIONS:ADDING an INLINE IMAGEA graphics file that displays as part of your html document. Use this format:<img src = “filename.gif”> Example:<img src = “ExerciseMan.gif”> Note this is a relative reference! Store in-line graphic files in the same folder as the HTML document that points to it. ADDING A MAILTO TAG<a href = “mailto:[email protected]”> anchor text</a>Example:<a href = “mailto:[email protected]”> Send mail!</a>or, the anchor text could be your email address.:A BASIC PAGE: An HTML document is composed of a SINGLE ELEMENT: <html>everything in between</html>THAT, in turn is composed of HEAD and BODY elements:<head>heading info (generally, the TITLE…)</head><body>body info (everything else)</body>SO YOUR DOC looks something like:<html> <head> identifies heading area<title>My Home Page! </title>Page title that appears in Title bar.</head><body>Body goes here</body> <!—body ends here!--></html> So let’s type a simple personal home
View Full Document
Unlocking...