CSE 102 Introduction to Web Design and Programming HTML Basics
HTML Markup Language, not programming language Web Documents use HTML format Enables you to structure and organize text, graphics, pictures, sound, video, etc … Supports headings, paragraphs lists, tables, links, images, forms, frames, etc … HTML versions from 2.01 – 4.01 (most recent) Replaced by XHTML 1.0 An HTML document has 2 components Markup tags (for page organization/formatting) Content
Exercise <? xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>My First Web Page </title> </head> <body style="background-color: cyan"> <p>Hello everyone!</p> <p>My Name is (put your name here) and today is (put in the date). HTML is wack! XHTML is most certainly not wack! HA HA HA HA HA HA HA HA HA HA HA HA HA HA HA HA HA HA!</p> </body> </html>
HTML Elements More than 90 types Top-level elements html, head, body Head elements title, link, meta, base, script Block-level elements h1-h6, p, ul, ol, li, table, etc … Inline elements a, br, em, hr, img, strong, etc … HTML tutorial - http://www.w3schools.com/html/default.asp
Add some block-level elements inside body, not inside any other tags <h1>Yankees</h1> <h2>are</h2> <h3>great</h3> <h4>Red Sox</h4> <h5>are</h5> <h6>smelly</h6> <p>My unordered list of Real World Cities:</p> <ul> <li>San Diego</li> <li>San Francisco</li> <li>Paris</li> </ul> <p>My ordered list of Real World Cities</p> <ol> <li>New York</li> <li>Los Angeles</li> </ol>
Add some inline elements somewhere inside body, not inside any other tags <p>I'm taking <a href="http://www.cs.sunysb.edu/~cse102">CSE 102</a><br /><br /><br /> this semester.</p> <hr /> <p>My friend in CSE102 class is <em>Name </em>. Here's a picture of <strong>him</strong>:</p> <img src="friend.jpg" /> Now, go on the Web and find a jpg Save it to the same directory as your Web page and name it friend.jpg Then, find jpg files for three cities Save it to the same directory as your Web page and name it as you wish Add <img src= "CityName.jpg" /> below the city names. For example: <img src="newyork.jpg" /> Post this document to your Sparky Web account such that I may view it, make sure you include the pictures.