1 / 48

HTML Lecture

HTML Lecture. C. Tim Berners Lee and the WWW. Internet was created by dozens of people. WWW was created by one person: Tim Berners Lee Lee invented HTML, HTTP, created the first web browser, and the first web server. Inventing HTML. History of the Web is fascinating.

vsweeney
Download Presentation

HTML Lecture

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 Lecture Sana.odeh@nyu.edu

  2. C. Tim Berners Lee and the WWW • Internet was created by dozens of people. • WWW was created by one person: • Tim Berners Lee • Lee invented HTML, HTTP, created the first web browser, and the first web server. Sana.odeh@nyu.edu

  3. Inventing HTML • History of the Web is fascinating. • Check out “Weaving the Web” by Tim Berners Leehttp://www.w3.org/People/Berners-Lee/ • Early challenge of the web: so many different operating systems: UNIX, Macintosh, NeXT, Mainframes, Windows. • Lee wanted to create a very simple language that would work on any of these platforms. Sana.odeh@nyu.edu

  4. Introduction to “Hypertext” • HTML: Hypertext Markup Language • Hypertext: • links within Web documents • connect one document to another • seems rather mundane today, but this was actually once revolutionary. Sana.odeh@nyu.edu

  5. Origins of HTML • Lee based HTML on SGML (Standardized General Markup Language) • More on this when we get to XML… • “A philosophical rule was that HTML should convey the structure of a hypertext document, but not the details of its presentation.” • Since then, HTML has evolved into a presentation language. Sana.odeh@nyu.edu

  6. What is HTML? • HTML (Hypertext Markup Language) • HTML standards are developed under the authority of the World Wide Web Consortium (W3C), headed by Tim Lee • http://www.w3c.org • HTML is the set of "markup" symbols or codes inserted in a file intended for display on a World Wide Web browser. • The markup tells the Web browser how to display a Web page's text, images, sound and video files for the user. • The individual markup codes are referred to as elements (but many people also refer to them as tags). Sana.odeh@nyu.edu

  7. What is “Hypertext” ? • Hypertext: • links within Web documents • connect one document to another • seems rather mundane today, but this was actually once revolutionary. • therefore, to understand HTML, you have to first examine the history of Hypertext. Sana.odeh@nyu.edu

  8. HTML • HTML is easy to pick up. • WebMaster in a Nutshell is a great reference guide. • Goal is to teach you the very basics and you can pick up the rest on your own. • Not focused on creating beautiful web pages. Sana.odeh@nyu.edu

  9. HTML Documents • HTML documents are text documents • Simple ASCCII text files • Html file extensions: .html or .htm • You can create html documents using: • WordPad or Notepad on the PC and Simple Text (MAC os 9) or TExtEdit (MAC OS X) • You can also use HTML Editors Sana.odeh@nyu.edu

  10. HTML Editors • HTML editors are called “WYSIWYG” • What You See Is What You Get • Examples of HTML Editors: • Dream Weaver • Home site • BBedit Sana.odeh@nyu.edu

  11. Cons Do not generate clean HTML Add redundant tags Add their own tags Do not offer good graphic tools to manipulate images Hard to fix the HTML codes since every time you open document, it adds code Pros Good for beginners DO not have to know much HTML to use editors Easy to create complex tables, image maps, and use advance functions as Style Sheets and Java scripts Easy for design HTML Editors: Sana.odeh@nyu.edu

  12. HTML Document Structure • HTML Document contains • Text (content of the page) • HTML uses the following file extensions or suffix: .HTML or .HTM • Embedded tags: • provides instruction for the structure, and appearance of the content Sana.odeh@nyu.edu

  13. HTML Document Structure • HTML document divides into major parts: • HEAD: contains information about the document: • As Title of the page, and Meta tag which describes content used by Search engines • Some JavaScript and Style sheets are part of the head • BODY: Contains the actual content of the document • It’s the part that will be displayed in the Browser Sana.odeh@nyu.edu

  14. <HTML> <HEAD> <TITLE> My web page </TITLE> </HEAD> <BODY> Content of the document </BODY> </HTML> Content of the document Sample HTML Document Sana.odeh@nyu.edu

  15. HTML Tags • All HTML tags are made up of a tag name and sometimes is followed by an optional list of attributes which all appear between angle brackets < > • Nothing within brackets will be displayed by the browser • Attributes are proprieties that extend or refine the tags function Sana.odeh@nyu.edu

  16. Basic Syntax • Most (but not all!) HTML tags have a start tag and an end tag: • <H1>Hello, world!</H1> • Basic Document Structure • header: information about the page, e.g. the title. • body: the actual content of the page. • document starts with • <HTML> and ends with </HTML> Sana.odeh@nyu.edu

  17. HTML Tags • Containers • Most HTML tags have beginning (opener) or (START) tag • They also have anend tag <HEAD> </HEAD> <BODY> </BODY> • For Some tags, the end tag is optional: <p> Sana.odeh@nyu.edu

  18. HTML Tags • Standalone tags • Few HTML tags do not use an end tag and are used for standalone element on the page: <img> to display an image <BR> Line break Sana.odeh@nyu.edu

  19. HTML Tags • Attributes <body bgcolor=“khaki” text=“#000000” link=“blue” vlink=“brown” alink=“black” > • are added within a tag to extend a tag’s action • You can add multiple attributes within a single tag • Attributes belong after the tag name, each attribute should be separated by one or more spaces • Most attributes take values, which follow an equal sign “=“ after attribute’s name • Values are limited to 1024 characters in length Sana.odeh@nyu.edu

  20. Information Browser ignore • Tabs • multiple spaces • Will convert all the spaces to a single • Example: “Hello, How are you?” !-- browser will ignore and convert all spaces and line return to one space -- Hello, How are you? Sana.odeh@nyu.edu

  21. <P> v. <BR> Tags • <BR>: Break • <P>: Paragraph tag. Creates more space than a BR tag. • <HR>: Creates a Horizontal Rule Sana.odeh@nyu.edu

  22. Paragraph Tag <P> • Leave one empty line after the tag • Multiple <P> tags with no intervening text is interpreted as redundant by all browsers and will display a single <P> tag Sana.odeh@nyu.edu

  23. Line break <BR> • Breaks line and starts text at a new line. • It will not add an empty line like the paragraph tag • Multiple <br> tags will display multiple line breaks Sana.odeh@nyu.edu

  24. Comments <!-- --> • Browser will NOT display text in between <!-- This is a comment --> <!-- This is another comment --> • I. E. uses the following tag as a comment: <comment> this a comment </comment> Sana.odeh@nyu.edu

  25. Headings: <h1> .. <h6> • You can create Headlines of various sizes on your page • Headlines appear as bold letters • An empty line will also follow the headlines. • Used for titles • H1 is the largest font and h6 is the smallest heading • Headings need an end tag </h1> Sana.odeh@nyu.edu

  26. Font Tags <FONT FACE=ARIAL SIZE=6> <B>The Curse of Xanadu</B> </FONT> <FONT FACE=ARIAL SIZE=3> by By Gary Wolf, <I>Wired Magazine</I> </FONT> • Font tags: • face: Arial, Courier, etc. • size: e.g. 3, 6 • color: e.g. “RED”, “GREEN”, etc. Sana.odeh@nyu.edu

  27. Font Tags: specifies information about font:font type, size and color <FONT FACE=ARIAL SIZE=6> <B>The Curse of Xanadu</B> </FONT> <FONT FACE=ARIAL SIZE=3> by By Gary Wolf, <I>Wired Magazine</I> </FONT> • Font tags: • face: Arial, Courier, etc. • size: e.g. 3, 6 • color: e.g. “RED”, “GREEN”, etc. Sana.odeh@nyu.edu

  28. Text format tags • Bold: <b> </b> or <strong> • Italic <I> </I> or <em> • <blink> </blink> • <HR> (Horizontal Rule) Displays horizontal line in the browser window. The line fills the window from left to the right margins. It’s useful to separate sections of your document Sana.odeh@nyu.edu

  29. Lists • There are several lists which is used to organize item lists in browser • Unordered list: Bulleted list (most popular), list items with no particular order • Ordered list: Numbered list Sana.odeh@nyu.edu

  30. Lists • HTML supports two types of Lists: • Ordered Lists (OL): e.g. 1,2,3 • UnOrdered Lists (UL): e.g. bullets. • Basic Syntax: <UL> <LI>Item 1 <LI>Item 2 </UL> Sana.odeh@nyu.edu

  31. Unordered list: • Unordered list: Bulleted list (most popular), list items with no particular order Fruit <UL> <LI> Banana <LI>Grape </UL> • Fruit • Banana • Grape Sana.odeh@nyu.edu

  32. Ordered list: • Numbered list: Fruit <ol> <LI> Banana <LI>Grape </OL> Fruit • Banana • Grape Sana.odeh@nyu.edu

  33. Hyperlinks (Anchor Tag): • Hyperlinks are used for linking: • within the same page (Name tags) • To another page in your web site (Relative Link or local link) • To another page outside your web site (Absolute or remote link) • Email Link • Text links • Image links • Hyper Links: are highlighted and underlined text. When clicked on, it takes you to another page on the web. <A command=“target”>highlighted text</A> Sana.odeh@nyu.edu

  34. Hyperlinks: • Absolute Link: links to another page outside your web site. Have to specify entire URL of the site. <A HREF=“http://www.nyu.edu/”>NYU Web Site</A> NYU Web Site Sana.odeh@nyu.edu

  35. Hyperlinks: • Relative Link: links to another page in your web Site. Do not have to specify entire URL. <A HREF=“index.html”>Go back to main page</A> back to main page Sana.odeh@nyu.edu

  36. Targeted Links • A tag includes a target attribute. If you specify target=“_blank”, new browser window will be opened. • <A target="_blank" HREF="http://www.wired.com/wired/archive//3.06/xanadu.html?person=ted_nelson&topic_set=wiredpeople">Full Text of Article</A> • More on this when we get to frames... Sana.odeh@nyu.edu

  37. Creating Anchor links: • Anchors name tag is the text you will link internally to a section within one document • Used for long documents to create a dynamic table of content • Anchors will make you jump to a different section in one document <a href=#intro> introduction </a> . . <a name=intro>introduction</a> Sana.odeh@nyu.edu

  38. Email Link: • You can email me at: <a href=“mailto:sao1@nyu.edu”>Sana Odeh</A> Sana.odeh@nyu.edu

  39. HTML Tables • Tables represent a simple mechanism for creating rows and columns of data • Great tool for laying out the content of any web page. • Very widely used • Very simple tag structure Sana.odeh@nyu.edu

  40. HTML - Tables • Tables tags starts with • <TABLE> tag, then • <TR> defines table rows. • Each <TR> represents one row in the table. • The number of rows is determined by the number of <TR> • <TD>Table data or <TH> Table Header can follow the <TR> tag • The number of cells in each row is determined by the number of <TH> (Table Header) and/or <TD> (Table data) tags contained within that row. • <TH> text will be in bold, and centered • <table> </table> Sana.odeh@nyu.edu

  41. Basic Tag Structure TR: Table Row <TABLE> <TR > <TH>Ticker</TH> <TH>Price</TH> </TR> <TR> <TD>MSFT</TD> <TD>71 1/16</TD> </TR> <TR> <TD>KO</TD> <TD>46 15/16</TD> </TR> </TABLE> TH: Table Heading TD: Table Data Every <TD> must have a matching </TD>. Every <TR> must have a matching </TR>. Sana.odeh@nyu.edu

  42. Table Attributes <TABLE ALIGN=“left" BORDER=0 BGCOLOR=“cyan“ width=600 cellpadding=0 cellspacing=0> • Align: "left", "center" or "right“ - "left" is the default • Border: thickness of the border in pixels - 0 for no borders • Bgcolor: is background color in HEX or as a name color • Background=url (works with IE only) • Cellpading=n (n is number of pixels (space) between cell content and its border • Cellspacing=n (n is number of pixels (space) between cells) • Height=n (height of table in pixels or percentages 100%) • Width=n (Width of table in pixels or percentages 100%) Sana.odeh@nyu.edu

  43. IV. HTML and Multimedia Basic Audio and Video Sana.odeh@nyu.edu

  44. Example 1: Images • <img src= "http://static.wired.com/wired/images/wired_logoblue.gif" width="153" height="31" border="0" alt="W I R E D"> • Image Attributes • src: URL for the image • width/height: not required but recommended. • border: not required. • alt: recommended. Sana.odeh@nyu.edu

  45. Adding multimedia files • You may want to have an image open as a separate document when a user activates a link • This is called an external image, and it is useful if you do not wish to slow down the loading of the main document with large inline images. • To include a reference to an external image, enter: • <A HREF="MyImage.gif">link anchor</A> • Use the same syntax for links to sounds files and movies. • The only difference is the file extension of the linked file. this example, specifies a link to a QuickTime movie. • <A HREF="AdamsRib.mov">link anchor</A> Sana.odeh@nyu.edu

  46. specifies a link to a QuickTime movie. Some common file types and their extensions are:<a href=“filename.extension> listen to sond file </a><a href=“sound1.wav> listen to sond file </a><a href=“movie1.mov> view movie clip </a> plain text .txt HTML document .html GIF image .gif or .jpg or .png Acrobat file .pdf AIFF sound file .aiff .au . Wav QuickTime movie .mov MPEG movie .mpeg or .mpg Sana.odeh@nyu.edu

  47. Ex. 4: Embedding Audio • For Internet Explorer, you can use BGSOUND: <BGSOUND src="http://www.3-cities.com/~yogi/Starwars/impressive.wav"> • Netscape doesn’t support BGSOUND, so you need to use the EMBED tag: <EMBED SRC="http://www.3-cities.com/~yogi/Starwars/impressive.wav" controls="console"> Sana.odeh@nyu.edu

  48. Ex 5: Embedded Video • Use the Embed tag: <EMBED SRC="http://www.nba.com/theater/video/jordan_m_layup_020898.avi" AUTOSTART=false> • If we have time later in the semester, we will discuss Real Media: Real Audio and Real Video. Sana.odeh@nyu.edu

More Related