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 "-//W 3 C//DTD XHTML 1. 0 Strict//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -strict. dtd"> <html xmlns="http: //www. w 3. org/1999/xhtml" xml: 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!</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 – h 1 -h 6, p, ul, ol, li, table, etc … • Inline elements – a, br, em, hr, img, strong, etc … • HTML tutorial - http: //www. w 3 schools. com/html/default. asp
• Add some block-level elements inside body, not inside any other tags <h 1>Yankees</h 1> <h 2>are</h 2> <h 3>great</h 3> <h 4>Red Sox</h 4> <h 5>are</h 5> <h 6>smelly</h 6> <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> <li>San Francisco</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/~cse 102">CSE 102</a> this semester. </p> <hr /> <p>My friend in CSE 102 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= "City. Name. 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.
Скачать презентацию CSE 102 Introduction to Web Design and Programming
c9778e279fd0f56e251e503c6f336e60.ppt